Adblock breaks this site

Align div content relative to background?

Discussion in 'Web Programming' started by MohtasaUnique, Mar 4, 2014.

Thread Tools

Thread Tools

  • Thread ID:
  1. MohtasaUnique

    MohtasaUnique Grand Master
    Retired Global Moderator

    Joined:
    Sep 1, 2007
    Posts:
    6,681
    Referrals:
    2
    Sythe Gold:
    690
    Discord Unique ID:
    158831078964985856
    Discord Username:
    Tony#2235
    Align div content relative to background?
    (Sorry about the annoying format, makes the text easier to see next to all the screenshots)
    Ok so I'm a HUGE noob when it comes to web dev, I've only just started learning. I've got the following code:​

    Code:
    <!DOCTYPE html>
<html>
<head>
<style>
html, body {
    min-height: 100%
}
body {
    background-color: #ffffff;
    background-image: url(banner.png), url(footer.png), url(filler.png);
    background-position: center top, center bottom, center center;
    background-repeat: no-repeat, no-repeat, repeat-y;
}
</style>
</head>

<body>
<style>
div.content {
	width:700px;
	padding:10px;
	border:2px solid #004688;
	margin:auto;
	margin-top:400px;
	margin-bottom: 135px;
}
</style>
<div class="content">test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test</div>
</body>
</html>
    And here is the result:
    [​IMG]
    Looks good, everything is aligned properly. But then when the page is resized to a size smaller than the div container, the div and the background fall out of alignment. Here's what it looks like:
    [​IMG].......[​IMG]

    How do I make it so that the div stays aligned relative to the background image? OR How do I make the background image stop at the left-most edge when resizing, so it stays center until the window is too small for it? The background image ends at the very end of the shadow graphic, the white in the background is just a background-color property.​
     
    MohtasaUnique, Mar 4, 2014
    #1
  2. SuF

    SuF Legend
    Pirate Retired Global Moderator

    Joined:
    Jan 21, 2007
    Posts:
    14,212
    Referrals:
    28
    Sythe Gold:
    1,234
    Discord Unique ID:
    203283096668340224
    <3 n4n0 Two Factor Authentication User Community Participant Spam Forum Participant Sythe's 10th Anniversary
    Align div content relative to background?
    The div has to be um. relative. Hold on.
     
    SuF, Mar 4, 2014
    #2
  3. SuF

    SuF Legend
    Pirate Retired Global Moderator

    Joined:
    Jan 21, 2007
    Posts:
    14,212
    Referrals:
    28
    Sythe Gold:
    1,234
    Discord Unique ID:
    203283096668340224
    <3 n4n0 Two Factor Authentication User Community Participant Spam Forum Participant Sythe's 10th Anniversary
    Align div content relative to background?
    Code:
    margin-left:auto;
margin-right:auto;
    will work but it will be as wide as the page.
     
    SuF, Mar 4, 2014
    #3
  4. SuF

    SuF Legend
    Pirate Retired Global Moderator

    Joined:
    Jan 21, 2007
    Posts:
    14,212
    Referrals:
    28
    Sythe Gold:
    1,234
    Discord Unique ID:
    203283096668340224
    <3 n4n0 Two Factor Authentication User Community Participant Spam Forum Participant Sythe's 10th Anniversary
    Align div content relative to background?
    Or wait.

    Code:
    margin-left:auto;
margin-right:auto;
width: 700;
     
    SuF, Mar 4, 2014
    #4
  5. SuF

    SuF Legend
    Pirate Retired Global Moderator

    Joined:
    Jan 21, 2007
    Posts:
    14,212
    Referrals:
    28
    Sythe Gold:
    1,234
    Discord Unique ID:
    203283096668340224
    <3 n4n0 Two Factor Authentication User Community Participant Spam Forum Participant Sythe's 10th Anniversary
    Align div content relative to background?
    try display: block;

    for the text no idea what it does

    but yea make a divcenter that shit background the image then put your content div in that div
     
    SuF, Mar 4, 2014
    #5
  6. MohtasaUnique

    MohtasaUnique Grand Master
    Retired Global Moderator

    Joined:
    Sep 1, 2007
    Posts:
    6,681
    Referrals:
    2
    Sythe Gold:
    690
    Discord Unique ID:
    158831078964985856
    Discord Username:
    Tony#2235
    Align div content relative to background?
    as said on FB, that's what it is currently (in case anyone else has input to give me too)
    I'll try this after work, all attempts thusfar to put the background inside a div has fallen flat, but it's probably because I'm just doing it wrong
     
    MohtasaUnique, Mar 4, 2014
    #6
  7. SuF

    SuF Legend
    Pirate Retired Global Moderator

    Joined:
    Jan 21, 2007
    Posts:
    14,212
    Referrals:
    28
    Sythe Gold:
    1,234
    Discord Unique ID:
    203283096668340224
    <3 n4n0 Two Factor Authentication User Community Participant Spam Forum Participant Sythe's 10th Anniversary
    Align div content relative to background?
    Put it within a centered div that contains the image.
     
    SuF, Mar 4, 2014
    #7
< Looking for site to code and work with! [free] | Looking for Quotes for a website >


 
 
Adblock breaks this site