13 replies [Last post]
charmarie1962
charmarie1962's picture
Offline
Regular
Texas / USA
Last seen: 5 years 25 weeks ago
Texas / USA
Timezone: GMT-5
Joined: 2014-03-18
Posts: 16
Points: 22

Hi!

I'm new here, and I'm a very old dog trying to learn new tricks! I've just finished a CSS course at http://codecademy.com, which was very helpful, but I'm still having some trouble.

I'm trying to put a background on my webpage, and I want this for all of my pages, so I wanted to put the code into my css page; however, I can't figure out for the life of me how to do it. I know I'm going to feel really dumb when you show me what I'm doing wrong.

I tried to put the background in my css layout by typing this code:

* {
background-image: url('../images/DHBackground.jpg');
background-attachment:fixed;
}

But every time I do, my navigation bar disappears, and all that's left is my padding.

The only way I can get my background pic to work is by putting it directly into my html like this:

This is what my page looks like...

http://disneyheaven.com/New/DHTest.htm

Any help would be greatly appreciated! Thank you so much!

Charlotte aka charmarie1962

Lil_Luigi
Lil_Luigi's picture
Offline
newbie
Last seen: 7 years 27 weeks ago
Timezone: GMT-5
Joined: 2014-03-18
Posts: 1
Points: 1

Hope this helps

Is the site going to be the size of your background? If so, I would set the height of your #wrapper div to the size of your background and set it to that instead of to the HTML, especially if your content is all going to be in the wrapper so it stays centered.
So I would add to your wrapper's CSS
#wrapper{
height: 1200px;
background-image:url('images/DHBackground.jpg');
}
Adding the height to your wrapper will also let you get rid of all those paragraph spacers.

This is just spit-balling, I don't know for sure if it would work. But if your wrapper is going to be taller then the background and you still want Walt's head on the bottom, you could set the wrapper minimum height to the size of the background and position it to the bottom. That way, as you add content and the wrapper gets longer, the picture will stay on the bottom right. If that works, then you may want to add some more padding to the bottom so that you know nothing will cover up the picture. I'm not sure how tall it is, but if it were 100px, I would add this to your wrapper
#wrapper{
min-height: 1200px;
background-image: url('images/DHBackground.jpg');
background-position: bottom;
padding: 0 0 100px 0;}

I'm rather new at this too, I hope that this helped somewhat. Now one of these experts can correct me Smile

helldog2004
helldog2004's picture
Offline
Enthusiast
Netherlands
Last seen: 5 years 8 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2014-03-02
Posts: 205
Points: 239

Well there are several ways

Well there are several ways to create a background which will take the whole screen, does not move AND shows the users their scrollbar Tongue

So what we want:

  • Fill the entire space with an image without white spacing.
  • Scales image as needed for smaller screens
  • Retains image proportions (scale)
  • Image is centered on page
  • As cross-browser compatible as possible

So here is an example of a good looking and working code for inside your CSS:

html { 
  background: url('images/bg.jpg') no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

Let us know if it worked.

Check Maximum Webdesign for your online solutions

charmarie1962
charmarie1962's picture
Offline
Regular
Texas / USA
Last seen: 5 years 25 weeks ago
Texas / USA
Timezone: GMT-5
Joined: 2014-03-18
Posts: 16
Points: 22

Thanks to both of you for the

Thanks to both of you for the help! Unfortunately, I don't think I'm advanced enough to understand any of what you're trying to say. What is "webkit" and "moz", and what does "cover" do or mean?

I'm sorry, I know I sound really stupid!

I did try both ways that you suggested. The first way - inside the wrapper - didn't work, and it took away my nav bar completely. The second way - inside the html - didn't do anything - the picture of Walt's face was nowhere to be found.

I'll keep trying, but thank you both so much!

Thanks so much!

Charlotte

charmarie1962
charmarie1962's picture
Offline
Regular
Texas / USA
Last seen: 5 years 25 weeks ago
Texas / USA
Timezone: GMT-5
Joined: 2014-03-18
Posts: 16
Points: 22

Changed My Background Code Again in CSS...

Okay here's my css code:

* {
font-family:Tahoma, Georgia, sans-serif;
font-size:12px;
color:#000000;
font-weight:normal;
font-style:normal;
margin:0;
padding:0;
border:0;
text-decoration:none;
background-image: url('http://disneyheaven.com/images/DisneyImages/DHBackground.jpg');
background-attachment: fixed;
}

* {
scrollbar-arrow-color: #000000;
scrollbar-face-color: #ffffff;
scrollbar-track-color: #ffffff;
}

#wrapper {
width:900px;
margin:10px auto;
}

#topnav {
width: 900px;
margin: 5px auto;
padding: 5px;
background: black;
font-style: normal;
text-decoration: none;
text-align: center;
}

#topnav ul li {
display: inline;
}

#topnav ul li a {
color: white;
font-size: 10px;
font-weight: bold;
}

Here's my result -

http://disneyheaven.com/New/DHTest.htm

This is exactly the way I want my page set up; however, my navigation bar keeps disappearing when I put in my background info. The padding for my nav bar is there, but no nav bar. Please help! What am I missing?

Thanks soooo much!

Charlotte

helldog2004
helldog2004's picture
Offline
Enthusiast
Netherlands
Last seen: 5 years 8 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2014-03-02
Posts: 205
Points: 239

hehe, the code I gave wasn't

hehe, the code I gave wasn't ment to add in html.
You had to copy and paste the code inside your CSS file.

html { 
  background: url('images/bg.jpg') no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

and change the link to your image.

Explenation for webkit, moz and o.

The usual command is background-size (for Internet explorer).
But not every browser uses normal commands, some browsers are created under (let's say) different operating systems, and to let your website work under different browsers (operating systems) we use different commands for the same result.

Webkit: Chrome and Safari
Moz: Firefox
O: Opera

So by using the command I gave above, your background image will show correctly in all the different huge browsers.

And to be sure, the command I have above works, if it does not work on your side, then you did something wrong Smile

Check Maximum Webdesign for your online solutions

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 30 weeks 9 hours ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Simplify, simplify, simplify

First, remove all presentation markup from the document. That includes the mouse-ear separators in the nav menu, the empty p elements (I know why they're there, but they're unnecessary), the nbsp spacers, and the huge bg image. Here's the basic markup for the page:

<!DOCTYPE html>
 
<html>
<head>
  <meta content="text/html; charset=utf-8"
        http-equiv="content-type">
 
  <title>Disney Heaven</title>
  <meta content=
  "Disney Heaven takes pride in offering its guests a variety of entertainment with a touch of Disney magic! &quot;To all who come to this happy place - welcome!&quot;"
        name="description">
  <meta content=
  "Disney, Disney Heaven, WDW, Walt Disney, Walt Disney World, Animation, Characters, Clipart, Disney Fairies, Disney Princesses, Hundred Acre Wood, Lyrics, Mickey Mouse, Midis, Movies, Tinker Bell, Winnie the Pooh,"
        name="keywords">
  <link href="disney-test_files/screen.css"
        media="screen"
        rel="stylesheet"
        type="text/css">
</head>
 
<body>
  <div id="wrapper">
    <h1 id="banner"><img alt="Disney Heaven"
         height="125"
         src="disney-test_files/DHTitle-600x125.jpg"
         width="620"></h1>
 
    <ul id="topnav">
      <li><a href="http://disneyheaven.com/">Home</a></li>
 
      <li><a href="http://disneyheaven.com/">Animation</a></li>
 
      <li><a href="http://disneyheaven.com/">Characters</a></li>
 
      <li><a href="http://disneyheaven.com/">Mickey&#39;s Playground</a></li>
 
      <li><a href="http://disneyheaven.com/">Walt Disney</a></li>
 
      <li><a href="http://disneyheaven.com/">Walt Disney World</a></li>
    </ul>
  </div>
</body>
</html>
Notice the alt attribute on the banner image. If your image doesn't load, maybe because the visitor has turned off images, or maybe he's blind; that text is the verbal equivalent of the image.

I got rid of the div wrapping what should be a heading element, and the div wrapping the ul. The ul is a perfectly good container for list items; no need to
protect it from the mean old world.

Crop old Walt's image. There's no good reason to create an image bound page nor to punish your guest with huge files. See the attd image.

Now here's the css. Feel free to ask about anything you don't fully grok.

body {
    background: white url(croppedwd.jpg) fixed bottom right no-repeat;
    color: #000000;
    font: normal 83%/125% Tahoma, Georgia, sans-serif;
    margin: 0;
    padding: 0;
    scrollbar-arrow-color: #000000; 
    scrollbar-face-color:  #ffffff; 
    scrollbar-track-color: #ffffff;
    }
 
p { 
    font-size: 1em;
    }
 
h1 { 
    color: #e53030;
    font-family: candice, cursive;
    font-size: 4em;
    }
 
#wrapper { 
    width: 900px; 
    margin: 1em auto;
    }
 
#topnav {
    padding: 5px;
    background: black;
    text-align: center;
    word-spacing: -.3em;
    }
 
#topnav li {
    display: inline-block;
    word-spacing: normal;
    }
 
#topnav li:before {
    color: white; 
    content: "ºoº";
    font-weight: bold;
    }
 
#topnav li:first-child:before { 
    content: "";
    }
 
#topnav li a {
    color: white;
    font-weight: bold;
    padding: 0 1em;    
    }
I left the scroll-bar properties in even though they are not valid. Some browsers support them, others don't.

//edit: I knew there was something I forgot. The asterisk selector, don't use it. Period. Full stop. And if you're ever tempted to use the so-called reset, step back slowly until you're out of reach, then turn and run like hell. It's an evil thing. See Global resets considered harmful. ~gt

cheers,

gary

AttachmentSize
croppedwd.jpg 25.77 KB

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

charmarie1962
charmarie1962's picture
Offline
Regular
Texas / USA
Last seen: 5 years 25 weeks ago
Texas / USA
Timezone: GMT-5
Joined: 2014-03-18
Posts: 16
Points: 22

Again...thanks to everyone

Again...thanks to everyone for trying to help me. @Helldog...I didn't mean I put the code into the html, I meant the css, but under html as you had it. I could tell by the brackets you meant it for my css code.

I guess I'll have to forget doing css for now because, honestly, I don't understand anything anyone's talking about. I don't see any way to use my background with Walt at the bottom of the page as a fixed background. I was told in a tutorial to use the * to reset my pages. So...I just don't think I'm advanced enough to understand all of the css.

Unfortunately, I'd hoped I could teach myself, but it looks like I'm falling "way" short. But thanks again to everyone for trying to help. I need a "kindergarten" based css for dummies obviously. Smile

Thanks!

Charlotte

helldog2004
helldog2004's picture
Offline
Enthusiast
Netherlands
Last seen: 5 years 8 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2014-03-02
Posts: 205
Points: 239

it doesn't work in HTML

it doesn't work in HTML unless you change the code to:

<style>html { 
  background: url('images/bg.jpg') no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}</style>

as you can see, if you are using css inside an HTML page you need to use the code <style></style>

If you are not using these little codes, then it does not work in HTML, but you do can paste it inside an other CSS file.
If you are using a different CSS file for your HTML page, then you need to add a code like this in your <head></head>

<link rel="stylesheet" type="text/css" href="mystyle.css">

Hope this works out.

Check Maximum Webdesign for your online solutions

charmarie1962
charmarie1962's picture
Offline
Regular
Texas / USA
Last seen: 5 years 25 weeks ago
Texas / USA
Timezone: GMT-5
Joined: 2014-03-18
Posts: 16
Points: 22

Thanks Helldog! I actually

Thanks Helldog! I actually just gave up on the background thingy, and so far, everything's going okay.

I do have another quick question though. Is it okay to use inline frames? I've only recently learned that it's not a good idea to use tables, so that's one of the reasons I'm trying to learn css. I haven't heard anything about frames though.

The reason I want to use them is because on each of my pages, I want everything to remain stationery, with the exception of my center content. Am I making sense?

Thanks again for all of your help! I know I'm a pain!

Charlotte

helldog2004
helldog2004's picture
Offline
Enthusiast
Netherlands
Last seen: 5 years 8 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2014-03-02
Posts: 205
Points: 239

Inline, or I-Frames seem to

Inline, or I-Frames seem to be a better implementation of the ’opening multiple pages in one parent page’ idea. Thus far, they do not present any major usability problems, although until the browsers have fully integrated HTML 4 we won’t know the full scope of their benefits and difficulties.

So, in conclusion, framed pages do not behave the same as normal HTML pages, and as such lead to confusion and awkwardness. A well-designed navigation structure using tables or layers is infinitely preferable.

Too many people use frames as a way to change their navigation bars by only modifying one page. This is much better accomplished through includes.

A well-designed framed page can still be produced, but it happens so rarely that I would advise all coders to stay away from the thought. Tests have also shown that users do not like framed navigation. It might seem sexy to the coder, but if the users don’t like it then you’re doing a bad job.

Frames confuse and irritate people. Avoid them.

Check Maximum Webdesign for your online solutions

charmarie1962
charmarie1962's picture
Offline
Regular
Texas / USA
Last seen: 5 years 25 weeks ago
Texas / USA
Timezone: GMT-5
Joined: 2014-03-18
Posts: 16
Points: 22

I appreciate the advice!

I appreciate the advice! What would you suggest, though, so that my pages are "stationery", except for the center? Let me show you a page I like as an example...

http://juliespixels.com/main.htm

This is just one of the many that I have found like this. I love how neat it is, and I love how everything stays put when someone goes to a new page. Am I making sense?

Thanks for putting up with all of my questions! I do truly appreciate it!

Charlotte

P.S. You mentioned "includes"; I've heard of that before, but I don't understand what they are or what they do.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 30 weeks 9 hours ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Example page

While you may like the presentation/design of the page, under the hood it is a mess. It uses coding that should never have gone into a page after 1997. While Microsoft's IE lagged in support of CSS, making it difficult to code for cross browser support, still by 2003, it was completely doable, so Julie's page is at least a decade out of date.

Did you try the code I gave you? It works as your description asks. Notice the html is cleaner and simpler, making it easier (I hope) to understand and to alter if needed.

Re includes: There are a variety of ways to use them, including server modules and server side programming languages. In essence, an include function is a place holder for some bit of code you want to re-use on various pages. A nav menu is a common example, the top banner and footer are others. Think of it as a paste edit done automagically.

Say you have a menu that goes on every page. Simply put that code snippet in a file of its own, like so:

    <ul id="topnav">
      <li><a href="http://disneyheaven.com/">Home</a></li>
 
      <li><a href="http://disneyheaven.com/">Animation</a></li>
 
      <li><a href="http://disneyheaven.com/">Characters</a></li>
 
      <li><a href="http://disneyheaven.com/">Mickey&#39;s Playground</a></li>
 
      <li><a href="http://disneyheaven.com/">Walt Disney</a></li>
 
      <li><a href="http://disneyheaven.com/">Walt Disney World</a></li>
    </ul>
Give the file a descriptive name, say top-nav.inc. You can name it anything, and I use the .inc suffix to remind of its purpose. Now instead of putting the menu on each page, simply include it. Here is an example of Apache web server's server side includes from their SSI tutorial:
<!--#include virtual="/includes/top-nav.inc" -->
Now if you want to change the menu, you do it one time in the include file and every page will mirror the edited menu.

Don't give up Charlotte. HTML and css are pretty simple, but that doesn't mean they're not powerful nor have gotchas with big teeth. Work your way through the html and css tutorials at HTMLDog.com. They are really good at providing the underlying knowledge base you need.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

helldog2004
helldog2004's picture
Offline
Enthusiast
Netherlands
Last seen: 5 years 8 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2014-03-02
Posts: 205
Points: 239

Yeah I as well think the

Yeah I as well think the website you send us is a website not that good.
I agree it looks nice, but sometimes looking nice is not the thing we want to achieve.

includes has been explained above by Gary.
So maybe it would be wise to use included instead of frames to create a good looking stationary website Smile
You can use include commands (and create different files to include) fot example the menu as mentioned above, but also for the header, footer, sidebar and content if needed.

Then the index will look like this:

<!--#include virtual="/includes/header.inc" --> 
<!--#include virtual="/includes/menu.inc" --> 
<!--#include virtual="/includes/content.inc" --> 
<!--#include virtual="/includes/sidebar.inc" --> 
<!--#include virtual="/includes/footer.inc" --> 

Yet it will show your complete website Smile
Hope this explains enough to get you going.

And trust me, you are no pain, we (or atleast I) love to see that people WANT to learn one of the internet languages.
And in the beginning, every language is hard to learn, but you will get the hang of it Smile

Check Maximum Webdesign for your online solutions