CODEWITHSUNDEEP
htmlcss
user3142828
user3142828

Reputation: 33

set background image in div full screen width

I have an image background set in in wrapperlp at top of page. It works fine but its width is set at 1000px. I need this image to span across the full width of the screen, but when i change width nothing happens.

css

#wrapperlp {
    width: 100%;
    margin: auto;
}

@media screen and (max-width: 800px) {
    #wrapperlp {
        width: 90%;
        min-width: 100px;
    }
}

#headerlp {
    font-size: 30px;
    color: white;
    text-align: center;
    padding-top: 10px;
    padding-bottom: 10px;
}

#para {
    font-size: 20px;
    color: white;
    text-align: center;
}


#game_img {
    height: 250px;
    width: auto;
    margin-bottom: -30px;
    position: relative;
    display: inline-block;
    float: left;
    margin-top:-35px;
    padding-top: 5px;
    max-width: 100%;
}

#video_play {
    position: relative;
    display: inline-block;
    float: right;
    margin-top:-30%;
    width:280px;
    padding-right:10px;
}


#spacer {            
    height: 40px;           
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    max-width: 900px;
    padding-top:20px;
}

.reward_img {
    padding-left: 45px;
    padding-top: 5px;
    position: relative;
    display: inline-block;
    float: left;
}

html

 <div id="wrapperlp">
        <div style="background-image: url(); height: 430px; width: 1000px; margin-left: auto; margin-right: auto; max-width: 100%;">
            <div id="headerlp">text</div>
            <div id="para">text</div>
            <div id="game_img"><</a></div>
        </div>
    </div>
    <div id="video_play">text</div>
    <div>
        <div id="spacer">
            <div style="position: relative; float: left">text</div>
        </div>

Upvotes: 0

Views: 24749

Answers (4)

Andre Figueiredo
Andre Figueiredo

Reputation: 13425

Besides other answers here, you can also use values cover or contain in background-size:

cover
The cover value specifies that the background image should be sized so that it is as small as possible while ensuring that both dimensions are greater than or equal to the corresponding size of the container.

background-size: cover;

contain
The contain value specifies that regardless of the size of the containing box, the background image should be scaled so that each side is as large as possible while not exceeding the length of the corresponding side of the container.

background-size: contain;

source: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Scaling_background_images

Upvotes: 2

Sajad Karuthedath
Sajad Karuthedath

Reputation: 15837

If you need to get the content(image) to the full width of screen,you must set width in percentage;that is 100% of screen

width:100%;

always give max-width in px and width in percentage when using max width

Upvotes: 0

Alex Shilman
Alex Shilman

Reputation: 1547

If you consider putting img inside of the div. This should do it.

  <div style="width:200px; height:200px">
     <IMG SRC="URL.PNG" width="100%" height="100%"/>
   </div>

To do this as a background image of the div, use

   height: 200px;
   width:200px;
   background-image: URL(image.PNG)
   background-size: contain;

In your CSS.

Upvotes: 1

Arthur Yakovlev
Arthur Yakovlev

Reputation: 9309

background-image: url('../images/bg.png');
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
-o-background-size: 100% 100%, auto;
-moz-background-size: 100% 100%, auto;
-webkit-background-size: 100% 100%, auto;
background-size: 100% 100%, auto;

Hope its help you

Upvotes: 0

Related Questions