full CSS file : http://pastebin.com/9LjYjiUF
.body-content{
background-image: white url("images/content-bg.gif");
background-repeat: repeat-y;
background-position: left bottom;
}
this is the html:
<div class="content-bead bg2 rockwell">
<div class="body-content">
<div class="body-content-sub">
<div id="content-left">
</div>
<div id="content-main">
</div>
</div>
</div>
</div>
== updated css===
background-image: url(images/content-bg.gif);
background-repeat: repeat-y;
background-position: left bottom;
background-color:#FFFFFF;
still nothing
i cant get the background image to come up at all. on
That's because background-image is not a combined property. either pick them apart:
background-image: url('images/content-bg.gif');
background-color: white;
or combine them:
background: white url('images/content-bg.gif') left bottom repeat-y;
give overflow:auto a try on the container with the bg, it might be that floated elements inside need to be cleared. Just experienced this problem with IE7 but worked fine in all other browsers
maybe remove white as it is not part of "background-image"
or change it to "background"
remove white value.
.body-content{
background-image: url("images/content-bg.gif");
background-repeat: repeat-y;
background-position: left bottom;
}
Related
Trying to figure out why the header image for my site is non-responsive.
From what I've read, this should do it with a width of 100% on the containing element.
https://super-lollipop-a72757.netlify.app/
.intro {
display: table;
width: 100%;
padding: 0;
background: url(../img/big_logo.jpg) center center no-repeat fixed;
background-color: #e5e5e5;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
}
Header component
import logo from '../images/logo2.png';
export const Header = (props) => {
return (
<header id='header'>
<div className='intro'>
<div className='overlay'>
<div className='container'>
<div className='row'>
<div className='col-md-8 col-md-offset-2 intro-text'>
<h1>
{/* {props.data ? props.data.title : 'Loading'} */}
<img style={{marginBottom:"20px"}} src={logo} alt="logo" />
<span></span>
</h1>
<p>{props.data ? props.data.paragraph : 'Loading'}</p>
</div>
</div>
</div>
</div>
</div>
</header>
)
}
It works fine with images I've tested from the gallery too. But, for some reason when adding the logo as the header image, it doesn't work right.
background-size: contain vs cover
As Chris Coyier summarized here, background-size can provide various options, and cover might not be you're looking for here.
cover is focused on ensuring there's no space uncovered—practically extending the background image to all four edges beyond the containing boundaries. contain, on the other hand, is focused on ensuring there's no cropping happening on the background image—practically leaving uncovered areas blank.
If you intend your big image to remain intact, uncropped, and readable at all times, try adding the following to your .intro class.
background-size: contain;
background-color: #426CB4;
You already have your background-position: center as part of your background shorthand, so this should cover it. background-color line helps to fill the container with the same color as the logo background.
Try adding this code to your intro element in CSS file. This will fix your problem.
display: flex;
background: url(../img/big_logo.jpg) center center no-repeat center;
background-attachment: fixed;
height: 100vh;
background-size: cover;
I am developing a site where the users' profile image needs to display in a circle. There are many circles on this site and the circle size can vary.
I can display square images properly but with vertical and horizontal images I face a problem.
I have to display the image in a circle with the below criteria:
Suppose image size is 500x300. The image should crop 100px off of the right and left sides, so that the center of the image is shown. Now the image should be 300x300, centered. Then I need to make a circle from that image. OR hide 100px of the right and left of the image using CSS.
If image size is 300x500, then the top and bottom area should be hidden using CSS
What do I have to do to fix this? CSS-only answers are best for me, if possible.
background-size
MDN -
CSS Tricks - Can I Use
As the image sizes are variable, you want to make sure they cover the div as well as being centered within it.
Adding the border-radius: 50%; will give you the circle effect.
.user {
display: inline-block;
width: 150px;
height: 150px;
border-radius: 50%;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}
.one {
background-image: url('https://via.placeholder.com/400x200');
}
.two {
background-image: url('https://via.placeholder.com/200x200');
}
.three {
background-image: url('https://via.placeholder.com/200x400');
}
<div class="user one">
</div>
<div class="user two">
</div>
<div class="user three">
</div>
In practice, you wouldn't want to have a class for each image, so you'd specify it with an inline style in the markup:
<div class="user" style="background-image:url('path/to/user/img.png')"></div>
object-fit
MDN - CSS Tricks - Can I Use
A newer alternative is to use the object-fit property on a regular <img> tag. This does not work in IE or older versions of Edge.
.user {
display: inline-block;
width: 150px;
height: 150px;
border-radius: 50%;
object-fit: cover;
}
<img src="https://via.placeholder.com/400x200" class="user">
<img src="https://via.placeholder.com/200x200" class="user">
<img src="https://via.placeholder.com/200x400" class="user">
set the image as background, centered.
<div class="image"></div>
css:
.image{
width: 300px;
height: 300px;
border-radius: 50%; /*don't forget prefixes*/
background-image: url("path/to/image");
background-position: center center;
/* as mentioned by Vad: */
background-size: cover;
}
fiddle
If you are using bootstrap you have class img-circle to do this.
<html>
<head>
<style>
#circle
{
border-radius:50% 50% 50% 50%;
width:300px;
height:300px;
}
</style>
</head>
<body>
<img src="skin-tone.jpg"
id="circle">
</body>
</html>
This is the image I'm talking about.
http://i.imgur.com/KkH8ryV.jpg
Right now it works as a background of my news content. The brown area is the title, yellow are is the content.
When I write a long text into the content area, the text go out of the div because the picture isn't big enough.
I want to split the image into 3 pieces.
Header
Middle
Footer
Header and footer will always be applied once. Middle has to repeat itself depending on how long the text is.
How can I achieve this in CSS?
PS: You may call the split images "header.png, middle.png. and footer.png"
HTML
<div id="parentDiv">
<div id="header">
</div>
<div id="middle">
</div>
<div id="footer">
</div>
</div>
Let's say the Image has a width of 300px.
CSS
#header
{
width:300px;
height:100px;
background-image: url("header.png");
background-repeat: no-repeat;
}
#middle
{ width:300px;
height:400px;
background-image: url("middle.png");
background-repeat: repeat-y;
/*If the width will be bigger than the actual
width of the image, then add:
background-repeat: repeat-x;
*/
}
#footer
{
width:300px;
height:100px;
background-image: url("footer.png");
background-repeat: no-repeat;
}
More about background-repeat.
Note that the image will be repeated, which won't look really good, I suggest that give the middle a fixed height, and use, overflow:auto; which will create a scrollbar when contents exceeds the size.
I have a CSS background image that I am using to fill the entire screen. I am using cover along with some IE fallbacks. When the background image loads it covers all of the content on the page, I cannot figure out why. Here is the code:
CSS:
#background-wrap{
background: url(/2012/images/august/moon-background.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
/* Cover for IE 7/8 */
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/2012/images/august/moon-background.jpg', sizingMethod='scale');
-ms-filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/2012/images/august/moon-background.jpg', sizingMethod='scale');
/* End Cover for IE 7/8 */
background-size: cover;
background-color: transparent !important;
position:fixed;
top: 0;
left: 0;
width: 100%;
height:100%;
max-width:3000px;
max-height:1500px;
z-index:1;
}
.img-center{
text-align: center;
z-index:9999;
}
HTML:
<div class="img-center">
<img src="/2012/images/august/neil-armstrong.png" class="feature-image" />
</div>
<!-- More Content -->
<div id="background-wrap"></div>
I am not sure why this is not work.
Note: I will not assign the background-wrap CSS to the body or html tag for compatibility reasons with IE 8 and below. Here is why:
Anyone trying to use the above IE filters and having problems with scrollbars or dead links or whatever else should try NOT using them on the html or body element. But instead a fixed position div with 100% width and height.
you need to wrap your background wrap around the content, not have it after it.
<div id="background-wrap">
<div class="img-center">
<img src="/2012/images/august/neil-armstrong.png" class="feature-image" />
</div>
<!-- More Content -->
</div>
Duplicate:
What is the best way to create rounded corners
How to make a cross browser, W3C valid, semantic, non-javascript ROUND corner?
jQuery rounded corners
Do you know a way to make rounded borders to div elements.
I used ruzee but i got problem to use CalenderExtender(asp.net ajax) and GMDatePicker components.
In CSS 3 there will be a standard for that. Today you can do it (only for Mozilla and Webkit based browsers) with:
.roundBorder {
-moz-border-radius: 1em;
-webkit-border-radius: 1em;
}
Otherwise you can use multiple divs with backgound-images, but JQuery will provide a more simple way (that I don't know about :()
The multiple div way could look something like this:
html:
<div class="topLeft">
<div class="topRight">
<div class="bottomLeft">
<div class="bottomRight">
<div class="content">
</div>
</div>
</div>
</div>
</div>
css:
.topLeft {
background-image: url('topLeft.png');
background-position: top left;
background-repeat: no-repeat;
}
.topRight {
background-image: url('topRight.png');
background-position: top right;
background-repeat: no-repeat;
}
.bottomLeft {
background-image: url('bottomLeft.png');
background-position: bottom left;
background-repeat: no-repeat;
}
.bottomRight {
background-image: url('bottomRight.png');
background-position: bottom right;
background-repeat: no-repeat;
}
You could use the CSS3 border-radius property, but this isn't supported in IE yet.
for JQuery, you could use 'Corner'. See here