Forums

Trying to add a bground image in a header (18 posts)

  1. dblast
    Member
    Posted 2 years ago #

    hi I am trying to add a back ground image in a header.php

    I put this code in the <body> tags

    <body background="http://www.longislandmartialarts.org/wsblog/images/bground.jpg">

    But for some reason it is not displaying.

    Here is the header.php

    [Code moderated as per the Forum Rules. Please use the pastebin]

  2. esmi
    Theme Diva & Forum Moderator
    Posted 2 years ago #

    You need to add the background image using CSS.
    CSS Tutorials
    Learning CSS

  3. dblast
    Member
    Posted 2 years ago #

    o.k thanks for telling me something I already knew and stated clearly in my post. If I knew CSS I would not have to post the question >:(

    Can somebody else give me an answer that does not require me going through hours of CSS tutorials? Obviously I am close but doing something wrong.

  4. dblast
    Member
    Posted 2 years ago #

    And thanks for removing the code youre a real pal, it was only a couple of lines.
    from the head.php;
    <body>
    <body background="http://www.longislandmartialarts.org/wsblog/images/bground.jpg">

    <img border="0" src="http://www.longislandmartialarts.org/wsblog/images/header.jpg">

    <div id="rap">
    <div id="content">
    <!-- end header -->

    From the style.css;

    #header {
    background: #fff;
    border-bottom: 3px double #fff;
    border-left: 1px solid #fff;
    border-right: 1px solid fff;
    border-top: 1px solid #fff;
    background: url(images/bground.gif) repeat-x;
    font: italic normal 230% 'Times New Roman', Times, serif;
    letter-spacing: 0.2em;
    margin: 0;
    }

    This post falls under the 'rules' of a couple of snippets (happy now?)

    Now if anyone could point out what I am doing wrong in this code I would appreciate it and thank you in advance.

  5. esmi
    Theme Diva & Forum Moderator
    Posted 2 years ago #

    <body background="http://www.longislandmartialarts.org/wsblog/images/bground.jpg"> is not using CSS.

  6. dblast
    Member
    Posted 2 years ago #

    Dude, you are a master of the obvious! now do you think you can stop wasting my time and either answer the question or let someone else do it. I find your repeated stating of the obvious getting a bit absurd and obnoxious. It's like telling me the sky is blue.

    I came on the forum asking for help and politely too and you snottily answer and then remove the code without giving me a relative beginner any advice on how to post the code within forum rules. Instead you post links that are about as helpful as coloring book to a blind man. Now you answer again with another statement that is not helpful at all.

    Man they make guys like you moderators and it goes to your head.

  7. dblast
    Member
    Posted 2 years ago #

    And it was in the style.css wiseguy you know the snipet you deleted. So it was html code within the style.css

  8. esmi
    Theme Diva & Forum Moderator
    Posted 2 years ago #

    1. When your code (all of your header.php file) was moderated, the moderation message included the reason, a suggestion to use a pastebin and even a link to the pastebin.

    2. The code you then posted is not within code backticks. This means it has been parsed by the forum software and may no longer be accurate.

    3. The line <body background="http://www.longislandmartialarts.org/wsblog/images/bground.jpg"> was from your header file - not your stylesheet. It's outdated (HTML 3.2) markup and should be removed.

    4. Causing aggravation and indulging in name calling in a forum that where volunteers offer free support is not the most effective way of getting help.

  9. dblast
    Member
    Posted 2 years ago #

    Holy smokes I can't believe you, you're like a bad penny you keep turning up. You're the one causing aggravation by continuously stating the problem but not offering one solution. And if you think calling you a wiseguy and dude is name calling maybe you should stop with the snide remarks and try really helping beginners instead of running them in circles.

    So let's recap you've answered me three times and never gave ONE reasonable answer. You told me to remove something that still does not answer my original question.

    If you would be helpful and not snide I would be more polite and thank you. But instead YOU choose to not be helpful in a forum that is supposed to be to which I came to looking for help. Politely I might add.

    Now I know there are others out there and I would really appreciate anyone else s help.

  10. Saocean
    Member
    Posted 2 years ago #

    I am trying to do the same thing, and like dblast I am a beginner. I would appreciate some help with this as well.

    P.S.
    Esmi I don't appreciate your responses especially since this is a forum for support and help. Remember Esmi, once you were a beginner too and you probably didn't know this stuff. Sure we could read a thousand CSS tutorials and probably stumble upon the answer after awhile, but we are trying to avoid doing so.

    Just please, answer our question, paste the code, or simply say "you don't know". Stop acting superior and "snide" as dblast put it.

  11. dblast
    Member
    Posted 2 years ago #

    Amen brother!
    Saocean, honestly it's hit or miss with this site. WordPress is such a great program but half the time I come here for answer's I get ignored and simply have to give up. There are a few really nice folks that help out once and a while but like I said it's hit or miss. You're posts can simply bet buried and unanswered. When ever I figure it out on my own I always come back and leave instructions for anyone else that had the same problem (it's the least I could do)

  12. dblast
    Member
    Posted 2 years ago #

    Saocean, any luck yet? I'm still tinkering with the style.css and the header.php. I don't understand how in the header.php it understand a simple image tag and link tag but not a background image. There has to be a simple code we are missing.

  13. dblast
    Member
    Posted 2 years ago #

    Saocean, I've tried the style.css, the header.php and even looked in the RTL.css. This is stupid it has to be something simple.

  14. dblast
    Member
    Posted 2 years ago #

    #header {
    	background: #fff;
    	border-bottom: 3px double #fff;
    	border-left: 1px solid #fff;
    	border-right: 1px solid fff;
    	border-top: 1px solid #fff;
    	font: italic normal 230% 'Times New Roman', Times, serif;
    	letter-spacing: 0.2em;
    	margin: 0;
    }
    Tried adding in;
    #header {
    	background: #fff;
    	background: url("http://www.longislandmartialarts.org/wsblog/wp-content/themes/moosadotheme/bground.jpg") repeat-x top left; }
    	border-bottom: 3px double #fff;
    	border-left: 1px solid #fff;
    	border-right: 1px solid fff;
    	border-top: 1px solid #fff;
    	font: italic normal 230% 'Times New Roman', Times, serif;
    	letter-spacing: 0.2em;
    	margin: 0;
    }

    Did'nt work!

  15. alchymyth
    The Sweeper
    Posted 2 years ago #

    the style #header would corresond, for instance, to a <div id="header"> which does not exist in http://www.longislandmartialarts.org/wsblog/ if that is the blog you are working on.

    if you are working on a different site, please post a link to it here to make help easier.

    and also describe in a bit more detail what you are trying to achieve -
    if you want that background image to stretch across the top of the site, adding it to the body style could work.

  16. dblast
    Member
    Posted 2 years ago #

    Thanks alchymyth, what I am trying to do is to have a background image behind my header image so when it is viewed on a wide screen monitor the background which is similar to the header simply tiles across the gap and seamlessly matches it. Right now if viewed on a wide screen monitor such as a laptop, the header image runs out and there is a gap between that and the side menu.

    On the blog page I am viewing it at home on a regular monitor so I cut the header image in half to see the background behind it. In other words instead of the white part creating a step effect I want a gif or jpg behind it to run across the rest of the page. If you can help me with specific code I would really appreciate it. I've been going crazy for hours trying all kinds of cut and paste, but I am not familiar with css.

  17. alchymyth
    The Sweeper
    Posted 2 years ago #

    you are close - just put the background css code to the body style:

    body {
    	background: #243C5D url(http://www.longislandmartialarts.org/wsblog/wp-content/themes/moosadotheme/bground.jpg) left top repeat-x;
    	border: 2px solid #243C5D;
    	border-bottom: 1px solid #243C5D;
    	border-top: 3px solid #243C5D;
    	color: #243C5D;
    	font-family: 'Lucida Grande', 'Lucida Sans Unicode', Verdana, sans-serif;
    	margin: 0;
    	padding: 10;
    	padding-top: 10px
    	padding-bottom: 10px
    	padding-right: 10px
    	padding-left: 10px
    }

    and while you are editing style.css, you might as well clear up a bit and remove the useless #header styles including a stray line just before that, i.e. remove exactly all this:

    background: #fff;
    #header {
    	background: #fff;
    	border-bottom: 3px double #fff;
    	border-left: 1px solid #fff;
    	border-right: 1px solid fff;
    	border-top: 1px solid #fff;
    	font: italic normal 230% 'Times New Roman', Times, serif;
    	letter-spacing: 0.2em;
    	margin: 0;
    }
    
    #header a {
    	color: #fff;
    	text-decoration: none;
    }

    all beginnings seem difficult - but there is no way round learnig html and css, as they are the building blocks of anything to do with the web - php, js and all else can come later.

    there a decent resources out there, w3school.com for instance, to read up on new topics, anytime you run into a challenge.
    also, the default theme that comes with the wordpress install, is a good source to see 'how do they do it'.

  18. dblast
    Member
    Posted 2 years ago #

    Thanks so much! It's exactly what I needed and it looks fine.

    Again thanks for the help.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.