HTML and CSS Backgrounds...

Question

dlannetts 0 Junior Poster in Training

14 Years Ago

Well, l have a gradient for my background, just a simple one, here is the code to run it:

body {
background: #d7e3ff url(images/top_gradient.png); repeat-x;
width: 800px; 
background-position:top left;
margin: 0 auto; text-align: left;
outline: none;
}

Thats the css, now how do l add a bottom gradient for the bottom of the page? what is the best way to do that? Or is there a way that l could have put both the top gradient and bottom gradient in the one png file and as l put text and stuff on my page it expands???

html-css web-design

3 Contributors
13 Replies
101 Views
1 Day Discussion Span
Latest Post 14 Years Ago Latest Post by almostbob

CJesusSaves 6 Light Poster

14 Years Ago

Depends on your HTML and or the effect you want your page to have. For instance you could just create one large image, (with your gradient at the top and the other at the bottom). Then in your css, you can define your background-attachment: fixed; That way, the background will remain pined behind the content. Or in your HMTL create a DIV wrapper, that will act as a second body tag for your html and then style it like you did for your body tag. Except that you will set the background position to bottom left or something of the sort.

<body>
<div id="wrapper">
///Content..........
</div>
</body>

This method will only work according to the styling of other HTML content. For instance, if within your wrapper you have another DIV with a style: position: absolute, then you'll notice that the inner DIV content will overlap the outside wrapper and you'll not get the effect you are looking for. Any inner content must cause the outer wrapper DIV to expand.

Hope I explained that well.

After implementing whatever method, feel free to repost with your html and css attached so that the board can further advise.

almostbob 866 Retired: passive income ROCKS

14 Years Ago

the imagined target audience
the people who have widescreens,
are also the people who have handheld devices,
so sites have to display in all resolutions, if not exactly the same just becuase wordwrap will alter, at least readably.
W3C current best practice, using ems or %, and the layout will adjust to screen resolution, monitor size, user basefont settings
position elements by %
set a margin in % not a fixed width for the body, (example)
and it adjusts and looks correct on everything from handheld devices to 8foot projection screens
any use of fixed size fonts or elements will cause problems for the user, as noted fixed positioning pushes elements offscreen, and users do not scroll sideways, they leave. Fixed size text also causes problems. on this monitor 10px is .09inches high, illegible
scaled in em, fonts are always readable, and give the same appearance regardless

Edited 14 Years Ago by almostbob because: n/a

almostbob 866 Retired: passive income ROCKS

14 Years Ago

your choice of yyyem or yyy% xxx and yyy being any numeric or calculated value, in css3 you can calculate

Edited 14 Years Ago by almostbob because: n/a

almostbob 866 Retired: passive income ROCKS

14 Years Ago

you can do either
you can set the offset of any element from window border, position:fixed;
from the logical edge of the html, position:absolute;
or from the current calculated position of prior elements, position:relative;
realtive position of 0 is the same as not specifying any location at all, the rendering engine just dumps each element in the position it occupies in the html

so if your site is based around an 800 central column on 1024*762 monitor that works

body {margin-left:10%; margin-right:10%; background:yellow url('almostbobwashere.gif') repeat; font:arial,roman 1em; color:#000; }
.firstdiv {left:5%; right:5%; background:#eee;}
.footer {bottom:0; width:80%; right:10%; position:fixed;}
.gototop {bottom:1px; right:1px; position:fixed;}
@media print { .footer {bottom:0; width:80%; right:10%; position:absolute; }
.gototop {display:none;}}

should give a similar looking layout on

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<!-- @(#) $Id$ -->
<head>
<title>HTML Template</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta name="Generator" content="almostbob" />
<meta name="Keywords" content="your,keywords,here" />
<meta name="Description" content="." />
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="cache-control" content="no-cache" />
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<link rel="stylesheet" type="text/css" href="style.css.php" />
</head>
<body>
<span name='top'></span>
<a href='#top' class='gototop'>&uparr; top</a>
<div class='footer'>copyright, contact, nav</div>
<div class='firstdiv'>content<p>bal bla</p></div>
</body></html>

Edited 14 Years Ago by almostbob because: n/a

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

dlannetts 0 Junior Poster in Training · Answer 1 · 2010-01-21T16:12:37+00:00

mmm, maybe l didn't explain enough in my first post, l am trying the wrapper, but if l completly show you what l have and no one rings my home phone again we should be fine...
HTML:

<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">

<div id="header">
<br/><br/><br/><br/><br/><br/>
</div>

<div id="bottom_gradient">
<br/><br/><br/><br/><br/>
</div>

And heres my CSS:

body {
background: #d7e3ff url(images/top_gradient.png); repeat-x;
width: 800px; 
margin: 0 auto; text-align: left;
outline: none;
}

#header {
background: url(images/header.png);
width: 800px; margin: 0px 0px 0px 0px; position:absolute; /* push down, up, left, right */
}

#bottom_gradient {
background: url(images/bottom_gradient.png); repeat-x;
width: 1000px; margin: 400px 0px 0px 0px; position:absolute; /* push down, up, left, right */
float: left;
}

Now firstly, tell me when l say this, my main problem is the god damn people who still don't have widescreens, so l try to make my sites for 800px, is theree any way to get the site and make it for my widescreen and get it to downsize when someone with a small screen uses it? Also l wouldn't be able to set my images 400px from the left would l because on a small screen it would push it to the right more, is this correct?
Now my main two things, my bottom gradient won't align left, it stays centered. And why in my html do l have to use 5 or 6 <br/>'s to get my images to show? and one last thing, ..... ...... have l done this ALL wrong, please tell me if l have, oh shit there goes the phone again...

dlannetts 0 Junior Poster in Training · Answer 2 · 2010-01-21T17:25:45+00:00

the imagined target audience
the people who have widescreens,
are also the people who have handheld devices,
so sites have to display in all resolutions, if not exactly the same just becuase wordwrap will alter, at least readably.
W3C current best practice, using ems or %, and the layout will adjust to screen resolution, monitor size, user basefont settings
position elements by %
set a margin in % not a fixed width for the body, (example)
and it adjusts and looks correct on everything from handheld devices to 8foot projection screens
any use of fixed size fonts or elements will cause problems for the user, as noted fixed positioning pushes elements offscreen, and users do not scroll sideways, they leave. Fixed size text also causes problems. on this monitor 10px is .09inches high, illegible
scaled in em, fonts are always readable, and give the same appearance regardless

mmm, so... em is like % and px right? l have never actually heard of em, seen it used but never new what it meant... And is em just something like 10em instead of 10px when being used? Also, if l have n image, say a background and set how far from the top and left it is and pin it there and put all my text in it, will it still stay there on a mobile phone and wordwrap, expand and stay the same distance from the right hand side?

CJesusSaves 6 Light Poster · Answer 3 · 2010-01-21T17:52:04+00:00

1em = 10px
why in my html do l have to use 5 or 6 - Because you didn't set a height for the #header
Maybe I didn't explain well either, but that's not how one would go about implementing the 'wrapper' layout. However, since you weren't even aware of the height business, I don't even want to begin to get technical. Unless you insist. Maybe there's something better out there for you.

Good luck.

dlannetts 0 Junior Poster in Training · Answer 4 · 2010-01-21T17:57:47+00:00

1em = 10px
why in my html do l have to use 5 or 6 - Because you didn't set a height for the #header
Maybe I didn't explain well either, but that's not how one would go about implementing the 'wrapper' layout. However, since you weren't even aware of the height business, I don't even want to begin to get technical. Unless you insist. Maybe there's something better out there for you.
Good luck.

Oh yeah, l think l had height there to start with but l got rid of it to try something an forgot to put it back...

almostbob 866 Retired: passive income ROCKS · Answer 5 · 2010-01-21T19:51:10+00:00

mmm, so... em is like % and px right? l have never actually heard of em, seen it used but never new what it meant... And is em just something like 10em instead of 10px when being used? Also, if l have n image, say a background and set how far from the top and left it is and pin it there and put all my text in it, will it still stay there on a mobile phone and wordwrap, expand and stay the same distance from the right hand side?

em(%) is the width of the M(any letter) in the users current basefont it scales around 1(100%), 0.8em(80%) is for unimportant text or footnotes 1.25em(125%) is for h2 1.5em(150%) for h1, 2em(200%) is doubly large
If you pin an element xxxem(%) from top/left it will stay there on a mobile phone or widescreen. If as well you set the width of the element as yyyem(%) it will auto adjust to mobile phone, windescreen, partscreen windows, and wrap the text within the width of the element
example a two column layout on widescreen, images in the top left corner of each column, each column being just under half screen width, with a margin between them and between the edge of the screen
|margin2%[image20%|text 27%|margin2%|image20%|text27%|margin2%|
you can modify the images in css, so they dont become invisibly small, and the text will then drop below them, preserving the layout in handheld, if not the actual text position @media handheld {style} it adds to 100% of the current browser window there are never horizontal scroll bars, only vertical ones. Users will scroll down forever, but wont go sideways
print looks differently to screen layout @media print {body { font:14pt; background:(url'copyright.gif') repeat; }} sets a reasonable basefont size for printed matter, the % or em scaling of the other elements adjusts around that, and tiles your copyright under the text
CSS is gold, and easy as, once you get started
there are easy individuall tutorials on w3schools.com/css/

( preaching:: very obviously recently converted to css layout )

almostbob 866 Retired: passive income ROCKS · Answer 6 · 2010-01-21T23:29:04+00:00

1em = 10px

If you don't know, don't guess
1 em = http://en.wikipedia.org/wiki/Em_(typography)

dlannetts 0 Junior Poster in Training · Answer 7 · 2010-01-22T03:19:01+00:00

Ok, so then in my css should l set my width to run this: yyyem(%) instead of just a: % sign?

dlannetts 0 Junior Poster in Training · Answer 8 · 2010-01-22T16:29:02+00:00

back again :3 Now if almostbob reads this we were talking about setting stuff with percentages, look here (image takes a while to load l think, just give it some time) http://www.freeimagehosting.net/image.php?1d7617e2df.jpg ... This is a section from my website, knowing that my website is something like 800px wide, the yellow bit is just an extra for wide screens, but what bit should be 0% the start of the grey bit or the very edge of my webpage, because l just had some thoughts , and wasn't sure which it should be or if it even matters...

almostbob 866 Retired: passive income ROCKS · Answer 9 · 2010-01-22T18:14:54+00:00

dammit &uparr; should be ↑, headslap moment

my stylesheets and scripts are .php to enable mod_deflate and mod_gzip.compression, because scripts are entirely too large
style.css is normal acceptible,

@media print styling changes the footer on printed pages so that it prints once on the end of the printout, regardless of howmany pages, and does not print the 'goto top' link
and the goto top link, is one screen pixel from the bottom right corner, here a pixel is an appropriate measure

I just didnt read what I Ctrl-v in the post