I was wondering if there is anyway to make the background image in a div expand to the border.
Let's say I have a div with a background and a border. I want to make the background image in the div expand over the border so it kind of looks like there is no border at all(I know there's no point for this but I need to know how to do it for something I'm working on).
Maybe something like this code:
#myImage {
height: 200px;
width: 500px;
background-image: url("image.jpg")
background-repeat: no-repeat;
border: 0px solid black;
overflow: hidden;
}
Related
I'm trying to create a page similar to this one http://www.seattlewebdesign.com/.
As you scroll down, the image stays fixed, however when I try to set the background as 'background-attachment: fixed' within a div tag, the background image stays fixed to the browser window and continues to remain fixed after scrolling past the div.
Any ideas on how to achieve what I'm trying to do? Any help would be very appreciated.
Encapsulate it in a div
Fiddle
html {
height: 2000px;
}
#test {
background-image: url("http://www.cssnewbie.com/wp-content/uploads/2008/12/random-art.gif");
width: 100%;
height: 200px;
border: 2px solid red;
background-attachment: fixed;
}
<div id="test"></div>
I have a query in relation to images, using just html and css (if possible).
I would like to have an image (e.g wallpaper image of a city at night) transformed into a circular shape with a surrounding border.
Hopefully i would use this image also as a button, and add text to it.
So for example a picture of a football stadium in the middle, circular in shape. Surrounded by a small border. When you click on the image (which will have text on it) you are transferred elsewhere...I will have 4 of these in a line on my poage.
Thanks
All help in this matter would be greatly appreciated
<div class="circular"><a></a></div>
.circular {
border: solid 1px
width: 300px; //edit this
height: 300px; //edit this
border-radius: 150px; // a half of width and height will cause a circle
-webkit-border-radius: 150px;
-moz-border-radius: 150px;
background: url(http://link-to-your/image.jpg) no-repeat;
}
Just answering your position question, check the answer here https://stackoverflow.com/a/19461564/2012904
The flexbox is a good method.
See this demo
HTML:
<a href="#" class="round">
Click Me!
</a>
<a href="#" class="round">
Click Me!
</a>
<a href="#" class="round">
Click Me!
</a>
CSS:
.round{
display:table-cell;
width:100px;
height:100px;
border-radius:50%;
overflow:hidden;
border:2px solid #cc0000;
background:url("http://www.placehold.it/100x100");
vertical-align:middle;
text-align:center;
}
Using the css property border-radius you can round the edges of an element. If you use border-radius: 50% you will end up with a circular image.
So, if you had the following HTML:
<img src="some.url" class="circle">
and the following css:
.circle{ border-radius: 50%;}
You will end up with a rounded image. In order to have a circular image, the dimensions of the element that border-radius is being applied to must be square. So, you will need to set a height and width property in the css as well.
.circle{
border-radius: 50%;
height: 150px;
width: 150px;
}
You should be aware if you are not using a square image and are applying the dimensions directly to the image, you could end up stretching or smushing the image.
To add the border to the image, you need to include the border property in your css:
.circle{
border-radius: 50%;
height: 150px;
width: 150px;
border: red solid 2px;
}
Alternatively, you could just create a button element and add the image as a background image to that element like this:
//html
<button class="circle"></button>
//css
.circle{
background-image:url("http://upload.wikimedia.org/wikipedia/commons/7/71/St._Bernard_puppy.jpg");
background-size: cover;
background-position: center center;
border-radius: 50%;
border: red solid 2px;
height: 150px;
width: 150px;
}
This will create a button element with a background image from the url specified. The background-size property will ensure that the image is always large enough to cover the button. The background-position will center the background image inside the button so that the portion of the image that is shown on the button will be from the center of the background image.
This might be a better option for you since you can change the background-position property to position a background image and keep the focus of that image in the center of the new circular element you have created.
In order to use the round image as a button you have a few ways you can go. The best would be to use pure javascript or use jQuery to select the rounded element and add a click event handler.
You could also wrap the rounded element in an <a> element and simply turn the rounded element into a link. Like this:
<button class="circle"></button>
In this case, you could remove the button if you wanted:
However, make sure you then add display: block; to your css for the .circle class:
.circle{
display: block;
background-image:url("http://upload.wikimedia.org/wikipedia/commons/7/71/St._Bernard_puppy.jpg");
background-size: cover;
background-position: center center;
border-radius:50%;
width: 150px;
height: 150px;
border: red solid 2px;
}
I have a background image which i need to display vertically as long as the content on the page, but, my background image only shows to the page in view and when I scroll down for the rest of the content the background is not shown in the rest of the page. What am I doing wrong?
css for the background image
#wrapper {
text-align: left;
margin: 0px auto;
border:0;
width: 960px;
height: 100%;
background-image: url('/images_/backgrounds/content_shadow.png');
background-repeat: repeat-y;
}
Try applying the background-image and background-repeat rules to body instead of #wrapper.
Try adjusting the height property, the 100% is relative to what?
Generally i prefer defining height rules with min-height.
My guess is that the wrapper div isn't extending to the bottom of the content either. Try setting the border of wrapper to:
border: 1px solid black;
You might find that the background is behaving just fine, and the div isn't doing what you want.
Apply the background image styling to html{ } instead.
remove the height: 100%; from css.
Hello i am looking for solution to do that:
http://www.delightfulwoman.pl/depilacja-laserowa/
When you click on the link on the left, the text changes inside right box...
I just want to know how to make that CornerRounded SemiTransparent div background, with scrollbar NEXT to it, not inside it.
You would say i can look into source file, but i am not that good at CSS, and i cant see transparency or opacity there :s or anything similar.
This website is using an image as the background for that DIV. They are using a PNG file which supports transparency. So in the CSS for the DIV (.o_right_cont) they are using an image of a rounded and translucent box instead of any fancy CSS.
On the inside of that DIV they have another DIV (.ofe_desc). They set the overflow to auto so that way the scrollbar would appear when the content is larger than the DIV.
.o_right_cont {
background: url(gfx/cennik_bg.png) no-repeat;
width: 670px;
height: 420px;
float: left;
margin: 10px 0px 0px 30px;
text-align: left;
padding: 10px;
}
.ofe_desc {
width: 662px;
height: 400px;
text-align: left;
overflow: auto;
line-height: 15px;
padding: 8px 30px 8px 8px;
}
Let me know if you have any questions.
Kind Regards,
- Chris
i have div take css class
.headbg01
{
background-image: url(../images/header_background01.jpg);
border-left: #cccccc 1px solid;
background-color: #ffffff;
width: 920px;
background-repeat: no-repeat;
height: 160px;
border-right: #cccccc 1px solid;
}
its working great in ie
the problem is the bg image doesn't appear properly in firefox
here is the ie div view
alt text http://img341.imageshack.us/img341/3595/35520026.jpg
and here is the firefox div view
alt text http://img641.imageshack.us/img641/950/31289427.jpg
i don't know whats wrong is it the height or what?
please i need some help
You may need to supply the background-position, try this:
.headbg01
{
background: #fff url(../images/header_background01.jpg) no-repeat top left;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
width: 920px;
height: 160px;
}
try declerating a strict doctype that should do the job
It appears that one browser is stretching the height/width to fill the div without keeping the image's height/width ratio, whereas the other is using the image's dimensions to scale it properly.
Make sure your image and your div have the same dimensions, minus the 2 extra pixels for the left and right border.
EDIT:
After closer inspection, it appears that the top of the second image is being cut off. Try specifying background-position: top left;.