CODEWITHSUNDEEP
htmlcss
Dcoto
Dcoto

Reputation: 143

Resizable background using CSS

Is there a way of having a resizable dynamic background image in such as.

    #mainPage {
    width: 100%;
    height: 100%;
    font-size: 3vw;
    text-transform: uppercase;
    background: black;
    font-weight: bold;
    position: fixed;
    background-image: url('imagesfolder/someImage.jpg');
}

It works when I put the image in the html page, but then the image is treated as inline and any element I try to place on top of the image is shunted to the right of it or below if I use display block on them. What I'm trying to do is have an image that resizes with the browser and place divs containing text on top of the image also rescaling with the browser and the image. Apologies if this seems simple but I am used to absolute positioning not responsive layouts.

Upvotes: 1

Views: 66

Answers (3)

Rovi
Rovi

Reputation: 259

you can use the 

background-size: cover;

or 

background-size: 100% 100%;

Upvotes: 0

MyNotes
MyNotes

Reputation: 445

It's the background-size property you want to be looking at here, does exactly what you need. If you set it to cover, your image will always cover its entire container.

Note this is not supported in IE8 and earlier.

More info and possible values at: https://developer.mozilla.org/en-US/docs/Web/CSS/background-size

Upvotes: 0

Elow
Elow

Reputation: 597

try:

#mainPage {
    width: 100%;
    height: 100%;
    font-size: 3vw;
    text-transform: uppercase;
    background: black;
    font-weight: bold;
    position: fixed;
    background-image: url('imagesfolder/someImage.jpg');
    background-size: cover;
    background-position: center center;
}

Upvotes: 2

Related Questions