Make background div responsive load at browsersize

I have been trying to get a responsive fullscreen at width slider to load responsive according to the browser-size, no matter if i have content below, as in this example:

How would the markup for a background image, slider or any other div be to achieve this?

Regards, Jay


You can use the new units in css (vw and vh) for your element, let's say a div: #mydiv { width:100vw; height:100vh; background: url('myimg'); background-sizing: 100vw 100vh; } This will give your element the width and height of th viewport.

Tags: Css / Wordpress

Similar questions

Want to make both the background image and color overly responsive
I'm developing PSD to Wordpress and facing problems with aligning a background image with respect to color overly, or the other way around. On desktop everything is good but on mobile the background image becomes small (I used background-size: 100%;). The color overly remains the same, which ruins everything on small devices. What's going wrong? &#...
I have 2 images in container background and foreground. How can I make foreground image responsive
I have 2 images. 1 I have set in the background and another is showing above that background image, is responsive, but the foreground image is going wrong when I drag the browser to small. Site link is below. I have attached the code. I've put the foreground image on .title_container: before which is showing perf...
Responsive DIV Row + Column Layout With Absolute Div Overlay
I am trying to achieve the attached layout for screenshot click here And have it responsive so that DIV B drops below DIV A on resize screen I have absolutely positioned DIV B so that it covers content and DIV C DIV C has to be full width and so does DIV A Any help would be appreciated I can achieve the layout with just desktop but not responsive
How to make a background-image in an :after selecter stay on background and correct position?
I want to make a blockquote with an image as background before and after. :before is not a problem, but with the :after selector, the image stays on the foreground. Text disappears... I tried different solutions with css, like display inline-block;giving the paragraph index:99 and so on. The css: The position is correct, but the image stays over th...
Div background image change on hover of non-parent/non-sibling div
This is a little bit of a complicated procedure, but I'll explain it as best I can. I'm creating a portfolio in wordpress and trying to include as much dynamism as I can. I have a large banner image at the top of the page and individual thumbnails of my work below. What I'm looking to do is be able to hover over the thumbnails and have them fade th...
Wordpress Plugin - How can I make the text responsive, OR replace it with a new div? I have this food menu that looks great online. The menu is generated by a Wordpress plugin with customizable CSS. The rest of the site looks mint on the iPhone, but when you get to the menu it overlaps awfully and kind of disappears. Open the link in the menu and make your window size really small - see how it overlaps at the s...

Also ask

We use cookies to deliver the best possible experience on our website. By continuing to use this site, accepting or closing this box, you consent to our use of cookies. To learn more, visit our privacy policy.