Hi all, Have following code on the webpage. <div style="background-image:url('beach_01.png');width:690px;height:225px;"> <p style="font-size:100px;font-weight:bold;color:rgba(255,215,0,0.7);">Simple Test</p> </div></p> Code (markup): it works. But I couldn't figure out where to add: background-position=center Code (markup): to center the image on the page. Please help. TIA B.R. satimis
the css code syntax is a bit off. Should be something more like: background-position: center center; //completely centered, horizontal and vertical Code (markup): or background-position: center top; //if you want it to stay at the top of the page, but centered horizontally Code (markup): You can put that bit of css in the same place you defined the actual background style. You might want to think about separating out the css from the html though. Could get messy after a while.
I just took another look at your code... Right now that image will be the background of that div, not of the entire page. So wherever that div is positioned, that image will show up. If you just want the whole page to have this image as the background, centered, use this: <style type="text/css"> body { background-image: url("..."); background-position: center top; background-repeat: no-repeat; //or whatever, maybe repeat-y } </style> Code (markup): But, if you want that DIV to be centered (and the background of the div along with it), you'd want to set the css margin of that div to "0 auto". Hopefully this made sense and was of some help.
Hi all, Thanks for your advice. I have 2 background-images, one for the whole webpage and another for the title. The background of the webpage works without problem <html> <head> <style type="text/css" title="Default-Style"> body { background-image: url("new_year_xmas-wallpaper_6.jpg"); background-position: 50% 50%; background-repeat: no-repeat; background-attachment: fixed; margin: 15em 5em; font-family: "tahoma", Arial, Helvetica, sans-serif; font-size: 2em; } H1 {color: yellow;text-align:center;margin-bottom:100px;} H2 {color: red;text-align:center;margin-bottom:50px;} H3 {color: green;text-align:center;margin-bottom:50px;} </style> <meta http-equiv="Default-Style" content="Default-Style" /> <meta name="generator" content="I am proud to have created my own page from scratch in Notepad." /> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <title>Simple Test</title> </head> <body> <P ALIGN=Center> <IMG SRC="2013.gif" background:transparent width="500" height="260"> <br> <br> <br> <div style="background-image:url('beach_01.png');width:690px;height:225px;background-position:center top;"> <p style="font-size:100px;font-weight:bold;color:rgba(255,215,0,0.7);">Simple Test</p> </div></p> ..... ..... Code (markup): I don't have H1, H2 and H3 I have tried your suggest without solution. Please help. TIA B.R. satimis
Ok, makes sense - try adding margin: 0 auto; //top & bottom margin is zero, left/right are auto (centered) Code (markup): to the background-image div. That will center the actual div element because the div has explicit width set.
You might also want to try using condensed properties, they're easier to manage. You also don't need to use quotes on url's if they contain no spaces. background: url(new_year_xmas-wallpaper_6.jpg) center center no-repeat fixed; You may also want to stop writing HTML 3.2 (upper case tags and attributes like align)-- this is spitting distance from 2013 after all. Likewise inlining your CSS using the STYLE attribute is sloppy coding -- but then if I was running things the STYLE tag would be obsoleted, and the STYLE attribute deprecated for all but the rarest of uses... after all, HTML is for saying what things ARE, not what they look like. Which is why I'd also probably not be wrapping a IMG and multiple line breaks in a paragraph since, well... that's not a grammatical paragraph.
Hi Deluxious, Your advice works for me. Adjusted code on div <div style="background-image:url('beach_01.png');width:690px;height:225px;margin:0 auto;"> Code (markup): Others remain unchanged. Thanks. Furthermore; 1) How to align "Simple Test" on its background, center horizontally and vertically? 2) How to add color border to the background, including type, e.g. double etc.? 3) How to outline alphabet letters with color? TIA B.R. satimis
Hi deathshadow, You are right. I have to inject some time to upgrade my knowhow on web design. I haven't performed graphic editing and web building for more than 10 years. Just came back to these fields about 3 days ago and found many changes. Condensed properties Web Design / HTML font-stretch Description http://webdesign.about.com/od/styleproperties/p/blspfontstretch.htm CSS font-stretch http://www.quackit.com/css/properties/css_font-stretch.cfm Anything to add? Thanks Whether HTML5 is the direction for me to go? Google search found me following articles; 15 Useful HTML5 Tutorials and Cheat Sheets http://webdesignledger.com/tutorials/15-useful-html5-tutorials-and-cheat-sheets HTML5 Tutorial
You can use it like this <div style="background-image:url('images/logo.png');width:690px;height:225px;margin: auto;text-align: center"> <p style="font-size:100px;font-weight:bold;color:rgba(255,215,0,0.7);">Simple Test</p> </div> Why you use the color like rgba use the hexadecimal. You have to write the less code
Personally, I think HTML 5 is a bunch of bloated crap designed to take us back to the WORST of 1990's coding practices. I do not advocate it's use, and would instead suggest you go with either of the current recommendation doctypes of HTML 4.01 STRICT or XHTML 1.0 Strict. I prefer XHTML 1.0 Strict for it's better defined and clearer structural rules, instead of the willy nilly mess that is HTML. EVEN if you were going to go HTML 5, I'd suggest learning to do semantic HTML 4/XHTML 1.0 first! With fewer tags and more clearly defined purposes for the tags it's the best place to learn semantics BEFORE you throw 5's allegedly semantic tags on top of it... and if you learn STRICT first, you just might realize when you go to look at 5 what complete pointless trash it truly is. Which is why I suspect most of the people 'embracing' 5 never bothered with STRICT in the first place and just kept slapping 4 transitional on their 3.2 documents... and why the handful of people who don't want to use it but have to because the suits are morons, do so by writing and validating as 4 STRICT, then slapping 5's doctype on it to keep the numb-nuts who'd never know the difference happy. For more on HTML 5 being idiotic trash I can't believe ANYONE experienced in web development is DUMB ENOUGH to want, see the second link in my signature.
Your advice works for me. Thanks. Can I add border to the background-image? If YES pls advise how. I just copied it from the site where I download the image. Actually it is not easy for me to read; Color Schemer Online v 2 http://www.colorschemer.com/online.html B.R. satimis
Hi deathshadow, Whether you meant; xhtml 1.0 strict ================ HTML <!DOCTYPE> Declaration w3schools.com/tags/tag_doctype.asp HTML - Document Type Declaration <!DOCTYPE> webtutorialplus.com/html/html-declarations.aspx HTML Tutorial
You can simply set "text align center" to the div which has got background image or you can fix the image or set the position-x center.