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;
Related
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>
I want to display my image in full-width Gallery.
The container is static:
#container{
width:100%;
height:400px;
}
<div id="container">
<img src="myimage.jpg">
</div>
I have images of different dimensions, so I want display the image in full width without deformate this in height, but centering the image (in height way) to diplay it in the center.
If you want to keep the same aspect ratio but your images are different dimensions your best solution would be as Patsy Issa is saying.
Use css
#myimage{
background: url("myimage.jpg") no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
width:100%;
height:400px;
}
And HTML
<div id="container">
<div id="myimage"></div>
</div>
JSFiddle: http://jsfiddle.net/qBPy6/
How do I get an image as banner across the page? Below shown is my code, please suggest me a solution.
.image {
background: url(banner.jpg) center no-repeat;
width:100%;
height: 300px; <-- Image height
}
the best method?
then apply that css to a classed div?
<div class="image" alt="" title="">
</div>
put the image inside
html
<div class="image">
<img src="banner.jpg"/>
</div>
css
.image {
display:block;
position:relative;
overflow:hidden;/*keeps the image in the container*/
height: 300px
}
.image img{position:absolute;bottom:0;width:100%}/*this is aligned to the bottom, may need to be top or center depending on the circumstances*/
made a fiddle: http://jsfiddle.net/filever10/srdcY/
It depends on the situation, there are many ways to approach the same problem. The way you described is correct way of doing it as we insert image in to code.
<img src="image/source/etc/etc/" alt="" title="" />
If you have to use a background image then try using CSS background-size property, like so:
.image {
background-image: url(banner.jpg);
background-position: center center;
background-repeat: none;
background-size: cover; /* or use 'contain' */
width: 100%;
height: 300px;
}
As htmltroll says, there are many ways to approach this.
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