Caitlin-havener Posted July 17, 2011 Share Posted July 17, 2011 http://havener.me/At the link above is what I am working on. On the main page is a picture of me. I do not want it to be opaque but I want the background of the div it is in to be opaque (as it is). How do I make one opaque and not the other, tried to put inline styling with image but did not work. And how did I tab text again??Don't judge me too harshly, I haven't optimized images and finished! Link to comment Share on other sites More sharing options...
Caitlin-havener Posted July 17, 2011 Author Share Posted July 17, 2011 AND OMG why did everything stop working in IE? The font I attached isn't working, the background image isn't stretched, the rounded divs isnt working!! WHATT!!?? Link to comment Share on other sites More sharing options...
Ingolme Posted July 17, 2011 Share Posted July 17, 2011 What version of Internet Explorer are you using? Internet Explorer 8 and under have practically no support for CSS3, I'm not sure how well IE9 supports it.If you set the opacity of an element, they opacity will be applies to everything it contains. If all you want is a transparent background color, you can use rgba values, or use a transparent PNG as the background if you want to support older browsers. Link to comment Share on other sites More sharing options...
dsonesuk Posted July 18, 2011 Share Posted July 18, 2011 create a outer container div and give it position relative, within that create a div to contain rounded corner opacity background, another to hold the image with position: absolute; <div id="outer"><div "id="rounded"></div><div id="img_container"><img src="myimge.jpg" /></div><div> #outer { position:relative; width: 960px; margin:0 auto;}#rounded {height:500px; opacity:0.85; filter:alpha(opacity=85); -moz-border-radius-bottomleft:15px;-moz-border-radius-bottomright:15px;-moz-border-radius-topleft:15px;-moz-border-radius-topright:15px;background-color:#D8E8EE;border:1px solid #A1A1A1;margin:0 15px 15px;padding:10px 40px;}#img_container { position:absolute; left:0; top:0; margin-top:200px; margin-left:55px;} because the image container is separate from rounded corner container, it is not affected by opacity styling, also by using position:absolute; it occupies no space, so you can position it anywhere you like without affecting the outer container height or any of the other elements within it.IE does not fully support rounded corners YET! you will have to google and download ie-css3.htc and add. border-radius: 5px; behavior: url(ie-css3.htc); /*link to htc file*/Note when i last used it, it can only be used to targets all corners.-moz-border-radius-bottomleft:15px; -moz-border-radius-bottomright:15px; -moz-border-radius-topleft:15px; -moz-border-radius-topright:15px;can be replaced with -moz-border-radius: 15px; To cover all browsers use-webkit-border-radius: 15px;-moz-border-radius: 15px;border-radius: 15px;http://border-radius.com/ Link to comment Share on other sites More sharing options...
Caitlin-havener Posted July 18, 2011 Author Share Posted July 18, 2011 Awesome. I am going to try that add in for IE when I get a chance. I'm viewing the page in firefox and my gradient image is repeating horizontally like it should but I want it to stretch to 100% height ONLY and auto width. I'm guessing the way I specified size is incorrect. I kind of guessed. How do I specify the height and not the width?havener.me #header{ background-image:url("images/gradient.jpg"); background-repeat:repeat-x; background-size:auto 100%; padding:10px 40px; margin:15px 15px 5px 15px ; border-radius:15px; -moz-border-radius:15px; /* Firefox 3.6 and earlier */} Link to comment Share on other sites More sharing options...
Ingolme Posted July 18, 2011 Share Posted July 18, 2011 Using the actual file width in pixels should work. Link to comment Share on other sites More sharing options...
Caitlin-havener Posted July 18, 2011 Author Share Posted July 18, 2011 The background image itself is not stretching out as well. I want the width to be 100% and the height to inherit or auto.. not sure which one there... Link to comment Share on other sites More sharing options...
dsonesuk Posted July 18, 2011 Share Posted July 18, 2011 To be honest i have not used background-size: and from i have just read :auto 100%; should work, but as it still in working stage and not finalized yet!, this might be why its not currently working. If I was to attempt this I would consider using a position absolute image, as i know this will work in all browsers as i have used this method before. Link to comment Share on other sites More sharing options...
Caitlin-havener Posted July 18, 2011 Author Share Posted July 18, 2011 So how else would I make the background image bigger. I editted the pixel size without success Link to comment Share on other sites More sharing options...
Caitlin-havener Posted July 18, 2011 Author Share Posted July 18, 2011 Also why isnt my font showing up in IE did I do something wrong@font-face{ font-family: JennaSue; src: url('JennaSue.ttf'), url('JennaSue.eot') format("opentype"); /* IE */} Link to comment Share on other sites More sharing options...
Caitlin-havener Posted July 19, 2011 Author Share Posted July 19, 2011 Would it be something wrong with my .eot? or is itnot opentype. w3schools doesnt have any details on the format that i see Link to comment Share on other sites More sharing options...
ste Posted July 20, 2011 Share Posted July 20, 2011 Also why isnt my font showing up in IE did I do something wrong@font-face{ font-family: JennaSue; src: url('JennaSue.ttf'), url('JennaSue.eot') format("opentype"); /* IE */}Unfortunately, you need to supply different formats for different browsers. .ttf fonts will not work in IEThis site will generate the needed formats from your ttf, they will also generate the css too. http://www.fontsquirrel.com/fontface/generator Link to comment Share on other sites More sharing options...
Caitlin-havener Posted July 23, 2011 Author Share Posted July 23, 2011 It's working thank you so much! What a great site! Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.