jegranet Posted March 19, 2012 Share Posted March 19, 2012 Can you put a background image with a <h1>. I tried this: h1 {font-family:Verdana, Arial, Helvetica, sans-serif;font-size:18px;color:#fff;margin:2px;background: url(graphics/h1image.png) no-repeat left top;} Instead of a background colour, I wanted a fixed sized image with rounded corners, but this doesn't seem to work. Can anyone help.Thanks.Jean Link to comment Share on other sites More sharing options...
eTianbun Posted March 19, 2012 Share Posted March 19, 2012 I dont see any reason why you are not geting what you want! Link to comment Share on other sites More sharing options...
dsonesuk Posted March 19, 2012 Share Posted March 19, 2012 you have to set width/height (well height at very least) of h1 element, else you will only see part of the image that the content height of characters within this element will show. Link to comment Share on other sites More sharing options...
jegranet Posted March 19, 2012 Author Share Posted March 19, 2012 I have made those changes as so:: h1 {font-family:Verdana, Arial, Helvetica, sans-serif;font-size:12em;color:#fff;margin:2px;width: 230px;height:39px;width:background:url(graphics/h1image.png) no-repeat left top;} But I still can't see the image. Jean Link to comment Share on other sites More sharing options...
dsonesuk Posted March 19, 2012 Share Posted March 19, 2012 h1 {font-family:Verdana, Arial, Helvetica, sans-serif;font-size:12em;color:#fff;margin:2px;width: 230px;height:39px;width:background:url(graphics/h1image.png) no-repeat left top;} the width: will break the css, and from what i gather the image should be in a graphics folder, and this folder is at the same location as the file with this css styling. yes! Link to comment Share on other sites More sharing options...
jegranet Posted March 19, 2012 Author Share Posted March 19, 2012 The image is in the graphics folder, but the style sheet is in the root directory. I will move that particular image to the root directory and see if that makes a difference. Thank you for spotting the duplicate width. Link to comment Share on other sites More sharing options...
jegranet Posted March 19, 2012 Author Share Posted March 19, 2012 Actually, going back, I noticed the style sheet is in a styles folder, so I moved the image into there and updated the css accordingly, and still no change. Link to comment Share on other sites More sharing options...
dsonesuk Posted March 19, 2012 Share Posted March 19, 2012 right start from scratch, IF html document in root, AND within the root you also have graphics folder to hold image, AND ALSO styles folder for css file html document css ref href="styles/stylesheetname.css" css ref for image background:url(../graphics/h1image.png) no-repeat left top; '../' will take you to root directory from css folder to graphics folder and then image Link to comment Share on other sites More sharing options...
jegranet Posted March 19, 2012 Author Share Posted March 19, 2012 Thank you for your patience. That was the original set up. My image was in the graphics folder and my style sheet in the styles folder. I have put everything back. I have now copied your css for the image (../graphics/h1image.png) and that worked. I was missing the ../ before the graphics folder. It is always something so simple isn't it. Many many thanks.Jean Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.