Formatting a backgroundimage

Question

nathan.pavlovsky 0 Junior Poster

10 Years Ago

Hello programmers!
I am a beginner in html using the w3 school website help as a guide.
Currently, I am working on an excercise website. The code is as following:

<!DOCTYPE html>
<html>

<title><head> ------- Website  </head></title>

<body bgcolor= #FFCCFF BACKGROUND="background.gif">

<h1> What This Site Is All About: </h1>
<hr SIZE="2" COLOR="BLACK" WIDTH="50%" ALIGN="LEFT">
<p1 align="justify">
This is intended to be a semi-professional website for -------- by displaying <br>
his resume for those interested in employing him and by sharing personal stories for the viewer's enjoyment.<br>
If you are a member of the <b> NSA</b>, you probably know everything about him that there you need to know.<br> 
Otherwise, because of privacy concerns, much personal detail about him will not be available on this website.<br>
</p1>

<hr SIZE="2" COLOR="BLACK" WIDTH="50%" ALIGN="LEFT"> 



</body>

As you can see, I have an image with the file name background.gif that I want to display as my website's background.
However, the image is small, and thus, is automatically repeated. After looking at forums, I realized that there is a
way to resize the image automatically to the website's width using CSS, but not having experience with CSS, have no idea
how to solve this problem. Can anybody offer suggestions on how to solve this problem (with pure html, or giving a short
introduction to CSS)?

html-css image web-design

3 Contributors
14 Replies
314 Views
1 Day Discussion Span
Latest Post 10 Years Ago Latest Post by JorgeM

JorgeM 958 Problem Solver

10 Years Ago

Within your head section...try

 <style>
 body {
      background-color:#ffffff;
      background-image = url('image.jpg')
      background-repeat:no-repeat;
      background-attachment:fixed;
      background-position:center; 
      background-size:cover;
 }
 </style>

Remove the style attribute from your body element.

JorgeM 958 Problem Solver

10 Years Ago

Here is a cleaned up/tidy version of your sample code.

<!DOCTYPE html>
<html>
<head>
 <title>Website Title</title>
<style>
body {
      background-color:#ffccff;
      background-image = url('background.gif');
      background-repeat:no-repeat;
      background-attachment:fixed;
      background-position:center; 
      background-size:cover;
}

hr {
border:2px solid black;
color:black;
width:50%;
text-align: left;
margin-left: 0
}

p {
text-align:justify;
}

</style>
</head>
<body>
<h1>What This Site Is All About:</h1>
<hr />
<p>This is intended to be a semi-professional website for -------- by displaying his resume for those interested in employing him and by sharing personal stories for the viewer's enjoyment. If you are a member of the <b>NSA</b>, you probably know everything about him that there you need to know.Otherwise, because of privacy concerns, much personal detail about him will not be available on this website.</p>
<hr /> 
</body>

27f55939a0a4d39be6c30f4c1be6555b

Edited 10 Years Ago by JorgeM

JorgeM 958 Problem Solver

10 Years Ago

You have several problems with syntax. Here is a list of some of the problems i found with your code.

You have to remove line 8. If you leave this line, it comments out your styles.

Line 11. Instead background-image = url('background.gif'), it should be background-image: url('background.gif');

Line 36, you are missing the opening body tag. <body>

Line 58, you are missing the closing html tag. </html>

On 43 and 49, you are using a tag called <p1>. there is no such HTML element. you should be using <p>.

you should avoid using the align property and use styles instead. In addition, since I showed you examples of using an internal stylesheet, there is really no reason in this case to use inline styles such as <div style="width:100%; height:100%; border:6px outset orange;">

If you make these changes, it works as expected..

3e2566db4f386dcf7dbd2b98f480dee7

JorgeM 958 Problem Solver

10 Years Ago

You are missing a semi colon on line 10. Delete line 28. Also delete line 29. Your style element is already open.

On line 43, you don't need the align attribute. You are already applying the justify style on line 23.

You no longer have hr elements in your markup. You can remove lines 16-22 from your style since it no longer has to style anything.

For HTML, I use a simple text editor such as notepad. I hear slot of people talk about an editor called notepad++. I don't use it but you may want to look into it. I use google chrome to help debug issues since it has built in developer tools.

Edited 10 Years Ago by JorgeM

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.

nathan.pavlovsky 0 Junior Poster · Answer 1 · 2013-12-15T23:50:21+00:00

Could you put the code that you suggested in context of my code?
I apoligize for asking you to repeat youself, but I am more of a visual learner, and the phrase Remove the style attribute from your body element.does not help my situation.

nathan.pavlovsky 0 Junior Poster · Answer 2 · 2013-12-16T03:01:32+00:00

OK. Here's my newly edited code.

<!DOCTYPE html>
<html>

<head><title> -------'s Website's Homepage  </title>

<style>

<! -- set up style for the  -- >
body {
      background-color:red;
      background-image = url('background.gif')
      background-repeat:no-repeat;
      background-attachment:fixed;
      background-position:center; 
      background-size:cover;
}
hr {
border:2px solid black;
color:black;
width:50%;
text-align: left;
margin-left: 0
}
p
 {
text-align:justify;
}

<! -- Create Styles For Headers and Paragraphs With Colors -->
<style type="text/css">
h1 {color:red;}
h2 {color:blue;}
p1 {color:black;}
</style>
</head>

<! -- Create Border -->
<div style="width:100%; height:100%; border:6px outset orange;">

<! -- Title and State Purpose-- >
<h1 align="center"><u> Welcome to -----'s Website! </u></h1>
<h2 style="margin-left: 1%;"><u> What This Site Is About: </u></h2>
<p1 align="justify" style="font-size:20px">
This is intended to be a semi-professional website for ------ by displaying 
his resume for those interested in employing him and by sharing  personal stories for the viewer's enjoyment.
If you are a member of the <b> NSA</b> (if you are familiar with American scandals), you probably know everything 
about him that there you need to know. Otherwise, because of privacy concerns, personal detail about him will not be available.

</p1>




</div>


</body>

Because I can't upload files with a .gif extension, I have also included the picture's equivalent in jpg format. However, if you need so background image with the .gif extension below is found on this google drive link below.
Click Here

However, my background is not showing up, my background is showing up as white, and my text's colors, which are supposed to be red, blue, and black, are showing up inconsistently (the declaration for this is after the comment on the styles for the headers and paragraphs). The image is in the same folder as my html file. I have posted a screen shot of the website on this post for your information. Please let me know as to the cause of my problems. Thank you very much! I really appreciate you helping me out with my problems.

nathan.pavlovsky 0 Junior Poster · Answer 3 · 2013-12-16T03:53:43+00:00

Here is my new code. I followed your suggestions:

I replaced 'p1' with 'p'
I added the </body> tag
I removed the (<div>) border: for simplicity's sake, I do not need it anyway
I added the </html> tag
I changed line 11 so that the picture is properly called

What is wrong this time? What do I need to fix?
Could you reccomend any editors/compilers/interpreters that when running html code, show if there are any errors?

Thanks so much, again.

<!DOCTYPE html>
<html>

<head><title> -------'s Website's Homepage  </title>

<style>

body {
      background-color:red;
      background-image: url('background.gif')
      background-repeat:no-repeat;
      background-attachment:fixed;
      background-position:center; 
      background-size:cover;
}
hr {
border:2px solid black;
color:black;
width:50%;
text-align: left;
margin-left: 0
}
p
 {
text-align:justify;
}

<! -- Create Styles For Headers and Paragraphs With Colors -->
<style type="text/css">
h1 {color:red;}
h2 {color:blue;}
p1 {color:black;}
</style>
</head>




<body>
<! -- Title and State Purpose-- >
<h1 align="center"><u> Welcome to ------'s Website! </u></h1>
<h2 style="margin-left: 1%;"><u> What This Site Is About: </u></h2>
<p align="justify" style="font-size:20px">
This is intended to be a semi-professional website for ----- by displaying 
his resume for those interested in employing him and by sharing  personal stories for the viewer's enjoyment.
If you are a member of the <b> NSA</b> (if you are familiar with American scandals), you probably know everything 
about him that there you need to know. Otherwise, because of privacy concerns, personal detail about him will not be available.

</p>






</body>
</html>

nathan.pavlovsky 0 Junior Poster · Answer 4 · 2013-12-16T13:47:06+00:00

Thank You very much! I got it to work! I really appreicate your helping me out. A quick question: since you see how unfamiliar I am with CSS, could you reccomend any internet tutorials for beginnrs that you consider to be the most helpful? Thank you so much!

JorgeM 958 Problem Solver Team Colleague Featured Poster · Answer 5 · 2013-12-16T14:12:50+00:00

I always recommend books over website tutorials. However, in this case, with regard to CSS, its not very difficult to learn the basics.

Here are some places you can visit.

One of the more popular sites is W3Schools.com. Like this site there are quite a bit of others that provide simple examples to get you going: CSS Tutorials.

Most importantly, with web development, you just need to get some hands on practice. Fortunatley, with HTML and CSS, you only need a text file and web browser. No web server is needed.

johmny -3 Junior Poster in Training · Answer 6 · 2013-12-16T15:40:24+00:00

Do not use the line style css type because it should not the friendly to the SEO.

nathan.pavlovsky 0 Junior Poster · Answer 7 · 2013-12-16T20:12:05+00:00

nathan.pavlovsky 0 Junior Poster

10 Years Ago

What is the SEO?

JorgeM 958 Problem Solver Team Colleague Featured Poster · Answer 8 · 2013-12-16T21:12:31+00:00

SEO is search engine optimization. SEO is all about getting your site crawled, indexed and highly ranked. I am not aware of any negative effects by having inline styles with regards to SEO.

Inline styles have their purpose. In your code sample, you don't need any since you have internal styles.

nathan.pavlovsky 0 Junior Poster · Answer 9 · 2013-12-16T21:45:50+00:00

I remember my mother tried to get me to make her a website some time ago. I did not start learning HTML back then, so I used a free editor at wix.com. I published the website, but it would not show up when appropriate keywords were typed into a google search box. Maybe the SEO was horrible.

JorgeM 958 Problem Solver Team Colleague Featured Poster · Answer 10 · 2013-12-16T22:46:02+00:00

Maybe the SEO was horrible.

could be... its not easy these days to stand up a website and expect it to rank in the top ten these days. It takes quite a bit of SEO work, great content, help from social networks, etc..