I am trying to have a header image with a border at the top of my page above my content area but for some reason my bg image is repeating. Do you know what is causing the image to repeat? Any help is greatly appreciated!
Here is my code:
<div class="container_12">
<div class="subheader">
<img src="images/subheader_1.png" alt="Subheader" width="940px" height="240px" />
</div>
</div>
here is my CSS:
.subheader{background:url(../images/subheader_1.png);background-repeat:no-repeat; min-height:300px; width:940px}
.subheader img {border:1px solid #ccc;padding:5px;background:#efefef}
You've only specified the background attribute in your css. This is a global attribute expecting all settings defined there. To couple the background-repeat with an image you have to use background-image:
Edit:
Based on your edit and posted screen shot, it looks like you don't have a repeating image so much as you've included the image in both the background AND an image tag. You should pick one or the other, but to get it to line up right, you need to remove the padding and margin:
.subheader img {
border:1px solid #ccc;
padding:5px; <--- TAKE THIS OUT
margin: 0px; <--- ADD THIS
background:#efefef
}
Related
I would like to make a background image for one of my images. The background image is transparent and can be seen at http://webmaster.tsaprotectandserve.com/new_design/images/view_site.png (and I'm pretty sure I have the correct url relative to the document in the code) and the idea is just that one you hover over the images, you can see the view site background image. Before I move the background image to a hover class and center it on the image, I wanted to make sure it works properly just as a background image but it isn't showing up.
My code is
<img style="float: left; margin-bottom: 20px; background-image: url(images/view_site.png)" src="images/white_house_website.PNG" width="490" height="231" alt="White House Website">
My website with the issue is here and the image with the problem can be found if you scroll all the way to the bottom. It is the white house image.
u can view my working solution in jsfiddle:
http://jsfiddle.net/avi_sagi/Ea78j/3/
CSS Rules
.thumb{
width:490px;
height:231px;
background:url('images/view_site.png') no-repeat center;
background-size:100%;
}
.thumb:hover .view_site{
width:490px;
height:231px;
background:url('images/white_house_website.PNG') no-repeat center;
background-size:128px 128px;
}
if your css is in external stylesheets remember to change the url of the background image or mention absolute url to be safe.
HTML
<div class="thumb">
<div class="view_site"></div>
</div>
It is actually working. the image is covering up the "Veiw Site" image.
Because its the background.
i removed the top image via google chrome...
What you want to do is set the "View Site" image as separate div as child of a div around the image.
and set it to appear on hover.
something like
http://jsfiddle.net/hWcMK/
CSS:
.imagebox:hover .viewsite{
display:block;
}
.viewsite{
width:125px;
height:125px;
background-image: url("http://webmaster.tsaprotectandserve.com/new_design/images/view_site.png");
margin-top:-150px;
position:absolute;
display:none;
}
and the HTML:
<div class="imagebox">
<img src="http://webmaster.tsaprotectandserve.com/new_design/images/abc_website.PNG" width="80%"/ >
<div class="viewsite"></div>
</div>
I have a question pertaining to CSS and HTML. I currently am building an article template, and am a little stumped on one aspect.
I plan to have a picture on one side, and have a text box of the same height on the opposite side. Both are surrounded with div tags as seen in the source following.
<!--begin article-->
<div id="article">
<div id="article_header">
Title goes here
</div>
<div id="article_body">
<!-- begin text. used for actual text of article-->
<div id="text">
Text Goes here
</div>
<!-- end text-->
<!-- begin article media. used for pictures -->
<div id="article_media">
<img src="source_goes_here" alt="This is an image!">
</div>
</div>
</div>
And the CSS...
#article{
border:1px solid gold;
margin-bottom:20px;
}
#article_header{
padding:5px;
font-family:arial;
font-size:36px;
font-style:bold;
color:white;
background:url('orangegradiant.png');
}
#article_body{
padding:5px;
display:inline-block;
width:auto;
}
#article_media{
border: 1px solid pink;
text-align:center;
display:block;
width:48%;
height:48%;
}
#text{
display:block;
width:51%;
float:right;
}
I know I probably over div at times, but I have been toying with this for about an hour and have hit a brick wall. I have the layout set, or so it would seem, by using the float property. The question is how do I get the image div to dynamically change, and have the text div go up or down in size based on the size of the image? Is there a way to set a ceiling for the image size? I would like to see the image be no bigger than about 50% of the div, that way massive images don't skew everything out of proportion.
Any help is greatly appreciated!
P.S. apologies for any code formatting issues. I am still trying to get everything figured out on that front.
Add to your CSS
#article_media img { max-height:50%; }
Or if you want the containing div itself
#article_media { max-height:50%; }
I'm trying to display
a variable width popup
that will have rounded corners with transparent edges to match the background color.
First I thought it was a simple rounded corner markup, but then the problem was with transparent background for the radius and the variable width of the popup.
<css>
.c-dialog-rc-tl, .c-dialog-rc-tc, .c-dialog-rc-tr,
.c-dialog-rc-bl, .c-dialog-rc-bc, .c-dialog-rc-br {
background-color: none;
height: 10px;
}
.c-dialog-rc-tl, .c-dialog-rc-bl {
float:left;
width:20px;
}
.c-dialog-rc-tl {
background-position: 0 -30px;
z-index:1005;
position:absolute;
}
.c-dialog-rc-bl {
background-position: 0 -43px;
z-index:1004;
position:absolute;
}
</css>
<div class="c-dialog-rc-top">
<div class="c-dialog-image c-dialog-rc-tl"></div>
<div class="c-dialog-image c-dialog-rc-tc"></div>
<div class="c-dialog-image c-dialog-rc-tr"></div>
</div>
I tried the replies of this answer but didn't work.
Please see the code at jsfiddle.
I'll try to provide as much as information if the question is not clear but please don't downvote or delete the question.
Has anybody solved this kind of problem, or know a better div layout or a css that will render such a requirement ?
Thanks in advance.
Changing the order of the rounded corners worked and with a little bit of change in css.
<div class="c-dialog-rc-top">
<div class="c-dialog-image c-dialog-rc-tl"></div>
<div class="c-dialog-image c-dialog-rc-tr"></div>
<div class="c-dialog-image c-dialog-rc-tc"></div>
</div>
<style>
/* explaining here in short, please refer fiddle for full css */
.c-dialog-rc-tl {float:left;}
.c-dialog-rc-tr {float:right;}
.c-dialog-rc-tc {overflow:auto}
</style>
Link to updated fiddle : http://fiddle.jshell.net/zMtg7/5/
I have an image inside a div, and I'm setting 1 pixel border to the div but there is a padding at the bottom between the border and the image. Can anyone please explain why?
Here is my html code:
<div id="border"><img src="example.png" /></div>
Here is my css:
#border {
border: 1px solid #000;
float: left;
}
use vertical-align:top for image
Browsers apply their default styles unless specified by your css, try explicitly setting padding in your css.
Firebug has a useful feature to let you see which styles have been applied to the elements on a page.
Hope this helps
Make sure the image has both padding and margin set to 0, e.g.:
img{padding:0;margin:0}
Or, to change just that image, apply a class to that particular image and set the style for that class, e.g.
<img class="foo">
.foo {padding:0;margin:0}
You are double closing your img tag:
You have
<div id="border"><img src="example.png" /></img></div>
Should be:
<div id="border"><img src="example.png" /></div>
I would like a CSS hover affect for multiple links that affect the same image. If you look at this example site I have Repair, Sales, Upgrades and Data Recovery links. When you hover over any one of them I would like the image to their left to change. You can hover over the image currently there to see what I mean.
website: http://ctuchicago.squarespace.com/
I would create a box that contains the image and all of the links. Then when the box is hovered over the image will change. This doesn't get you exactly what you want - which is only hovering over the link changes the image, but I think it is close enough and far easier.
http://jsfiddle.net/mrtsherman/D5ZRs/
div:hover img { background: url('blah'); }
<div>
<img src="" />
Repair
Sales
</div>
Put the image inside the a tag. Then use position: relative to position the image...
for example
a img{
position: relative;
left: -50px;
}
This seems to work... partially XD
<div class="frontdiv fblankd">
<a href="/audio-video" id="hav" style="width: auto;">
<div style="
height: 80px;
margin-left: 81px;
background: white;
color: black;
">
<h3>AUDIO / VIDEO</h3>
<p>Music Server, Home Theatre, Zone Systems, Universal Remote Control</p>
</div>
</a>
</div>
The basic idea is to have your content in the a tag (like ever body has been saying).
What I've done with the styling is set the anchor to width:auto and wrapped the content in a div. this div I then gave a height of 80px, left margin of 81px, background of white and font color of black.
Wrap the <p>, and <h3> tags inside the <a> tags.