Jump to content

Archived

This topic is now archived and is closed to further replies.

annekek

background responsive

Recommended Posts

annekek

Hi,

 

I want to have a responsive background-image of a full-with section area. 

 

How do I do that?

 

Anneke

Share this post


Link to post
Share on other sites
James B

Hi Anneke

 

IF you add a background image to a full width section area in the DMS control panel then this will resize when the browser window is reduced and it changes in to the mobile view. The image will resize to best fit the area, so you won't have the full image displaying depending on the dimensions of the image.

 

The css being applied to the area will be something like the below depending on your settings. You can try changing the background-size to contain to see if this gives you more of the effect you were looking for.

 

.pl-bg-cover {
    background-size: cover;
}

Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
annekek

Thanks James,

 

This works but the actual area is not resized so it leaves a large white space under the image.

Up till now the only way for me to achieve the effect I'm looking for is the use of the revolution slider. But i don't want to put a slider on every page. 

 

I tried the full-width media section. 

 

Any other ideas? 

Share this post


Link to post
Share on other sites
Danny

Can you provide a link so we can see the issue first hand please.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
Danny

I can't view anything, you have a coming soon message on your site.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
annekek

the white space appeared if i used the code given above. 

 

.pl-bg-cover {
    background-size: cover;
}
It repeated the image and if I use css: no repeat there is a large whitespace below the image. 

It is a bit hard to explain. 

 

I guess it is not possible to have a full width image that is fully responsive. 

 

Or do you have another idea Danny?

Share this post


Link to post
Share on other sites
Danny

Its already using cover.

 

What is it you're trying to achieve, what you must realise is that using cover will not give you a perfect resized image. What cover does is scales the image to be as large as possible so that the area is completely covered by the image. Some parts of your image may not be in view within the background positioning area.

 

So if you can show us what it is you want we may be able to help. However, using cover will result in your image being trimmed slightly.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
James B

I think the only way you'd be able to do that or close to that would be to add the image manually into a text box/media box using html and then adjust it using css, remove the padding etc.

 

Applying the image to an area as a full width background then adjusting with css to keep the image whole as the screen resizes, will leave the white space below as that's the height of the full width section area you're seeing below the image.

 

The easiest option would be to use the revslider unit as you have done on the other page. Is there a reason you don't want the slider to appear on multiple pages?


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
annekek

Thank you James,

 

Maybe I will use revslider than, I was a bit worried about the Load (don't know if thats the right term) there are 50 + pages. It seems to be a bit too much. :-)

 

I will think about it.

Share this post


Link to post
Share on other sites

×