HTML/CSS Help

[ThatBlockishWay]

Im having some issues with my css file and divs, basically Im trying to set up a div system that lets me set whatever photo I put in the div become the background image for the page but I cant wrap my noodle on if Im going about it wrong.

HTML Page:

<div class= "background">
    <img src= "C:/Maker/game/IntroBackground.jpg">
</div>

 

CSS Page:

div.background {
    width: 100%;
    height: auto;
}

 

Ive tried using the background-image and stuff instead of trying to set width and height too but that didnt work, is there a way to set

body {

background-image: [looks at whatever photo Ive got in div.background];

background-size: cover;

etc.

}

Or any way to set the div to make the img in the div become the background for the whole page?

[Glenwing]

16 minutes ago, ThatBlockishWay said:

Im having some issues with my css file and divs, basically Im trying to set up a div system that lets me set whatever photo I put in the div become the background image for the page but I cant wrap my noodle on if Im going about it wrong.

HTML Page:

<div class= "background">
    <img src= "C:/Maker/game/IntroBackground.jpg">
</div>

 

CSS Page:

div.background {
    width: 100%;
    height: auto;
}

 

Ive tried using the background-image and stuff instead of trying to set width and height too but that didnt work, is there a way to set

body {

background-image: [looks at whatever photo Ive got in div.background];

background-size: cover;

etc.

}

Or any way to set the div to make the img in the div become the background for the whole page?

I think you need to set the size properties on the img itself as well, not just the div containing the img.

[ThatBlockishWay]

10 minutes ago, Glenwing said:

I think you need to set the size properties on the img itself as well, not just the div containing the img.

Using css can I make just the photo per page Im trying to set as the background? Ill have multiple photos per page, how would I make just the one photo have certain properties without manually setting the properties per page? (Each page will have a different background photo but I want all the backgrounds to have the same properties)

Edit:

Would it be 

div.background {

img {

background-size: cover;

background-repeat: no-repeat;

background-attachment-fixed;

}

width: 100%;

height: auto;

}

 

[Glenwing]

4 minutes ago, ThatBlockishWay said:

Using css can I make just the photo per page Im trying to set as the background? Ill have multiple photos per page, how would I make just the one photo have certain properties without manually setting the properties per page? (Each page will have a different background photo but I want all the backgrounds to have the same properties)

Should be able to do that with a class (img.background)

[0x21]

9 minutes ago, ThatBlockishWay said:

...

Edit:

Would it be 

...

No. You can't nest vanilla CSS.

div.background {
  width: 100%;
  height: auto;
}

div.background img {
  background-size: cover;
  ...
}

[ThatBlockishWay]

5 minutes ago, mshaugh said:

No. You can't nest vanilla CSS.

div.background {
  width: 100%;
  height: auto;
}

div.background img {
  background-size: cover;
  ...
}

This doesn't seem to work... Also good to note, wasn't sure if that was possible or not.

Edit: Maybe Ive got something wrong?

HTML

<div class= "background">
    <img src= "C:/Maker/game/IntroBackground.jpg">
</div>

 

CSS

div.background {
    width: 100%;
    height: auto;
}
div.background img {
    background-size: cover;
}

[0x21]

13 minutes ago, ThatBlockishWay said:

This doesn't seem to work...

div.background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;
  overflow: hidden;
}

div.background img {
  width: 100%;
}

 

[ThatBlockishWay]

53 minutes ago, mshaugh said:

div.background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;
  overflow: hidden;
}

div.background img {
  width: 100%;
}

 

Ey this worked, I gotta fix the height but thats about it. Thanks!

[0x21]

12 minutes ago, ThatBlockishWay said:

I gotta fix the height

div.background img {
  min-width: 100%;
  min-height: 100%;
}

Which will fill and maintain aspect ratio.

[ThatBlockishWay]

44 minutes ago, mshaugh said:

div.background img {
  min-width: 100%;
  min-height: 100%;
}

Which will fill and maintain aspect ratio.

Hmmm it still only goes down to where <p> starts

Edit: I fixed the height thingy

CSS

div.background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;
}
div.background img {
    width: 100%;
    min-width: 100%;
    min-height: 100%;
    overflow: hidden;
    position: fixed;
}

[0x21]

1 hour ago, ThatBlockishWay said:

Edit: I fixed the height thingy

div.background {
  ...
  overflow: hidden;
}

div.background img {
  position: fixed;
  width: 100%;
}

Basically, move the overflow to the div element, and remove the min-width and min-height as they should now be redundant.

[AbsoluteFool]

On 12/4/2018 at 5:17 PM, ThatBlockishWay said:

Im having some issues with my css file and divs, basically Im trying to set up a div system that lets me set whatever photo I put in the div become the background image for the page but I cant wrap my noodle on if Im going about it wrong.

HTML Page:

<div class= "background">
    <img src= "C:/Maker/game/IntroBackground.jpg">
</div>

 

CSS Page:

div.background {
    width: 100%;
    height: auto;
}

 

Ive tried using the background-image and stuff instead of trying to set width and height too but that didnt work, is there a way to set

body {

background-image: [looks at whatever photo Ive got in div.background];

background-size: cover;

etc.

}

Or any way to set the div to make the img in the div become the background for the whole page?

Try using html { background-image: url("location");} this will give you a background image on the page. If you want this to change like "click image in div 1 - Shows as background" click image in div2 show as background. you need javascript or php