Jump to content
Search In
  • More options...
Find results that contain...
Find results in...

HTML/CSS Help

Go to solution Solved by 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%;
}

 

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?

Link to comment
Share on other sites

Link to post
Share on other sites

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.

Link to comment
Share on other sites

Link to post
Share on other sites

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;

}

 

Link to comment
Share on other sites

Link to post
Share on other sites

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)

Link to comment
Share on other sites

Link to post
Share on other sites

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;
  ...
}
Link to comment
Share on other sites

Link to post
Share on other sites

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;
}

Link to comment
Share on other sites

Link to post
Share on other sites

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%;
}

 

Link to comment
Share on other sites

Link to post
Share on other sites

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!

Link to comment
Share on other sites

Link to post
Share on other sites

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.

Link to comment
Share on other sites

Link to post
Share on other sites

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;
}

Link to comment
Share on other sites

Link to post
Share on other sites

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.

Link to comment
Share on other sites

Link to post
Share on other sites

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

Link to comment
Share on other sites

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share


×