I just created about us page and added banner as background image.When i reduce the screen the image is getting dissorted.It is not responsive to all the screens.Here is the css
section.titlebar {
background: url(../images/team-bg03.jpg);
background-repeat: no-repeat;
background-position: 0px 89px !important;
height: 914px;}
Tried by adding this
section.titlebar {
background: url(../images/team-bg03.jpg);
background-repeat:no-repeat;
background-size:contain;
background-position:center;
}
If i am giving background size as contain it is not getting the full width banner but i need to get as full width banner
The cover property is what you're looking for. However - this may lead to some cropping of the image at different breakpoints.
section.titlebar {
background: url(../images/team-bg03.jpg);
background-repeat:no-repeat;
background-size:cover;
background-position:center;
}
Related
I am a student and I'm having an issue with one of the video tutorials regarding using a background image. I followed the code exactly as is in the video but it's not producing the same results. It just keeps showing the image tiled throughout the whole web-page. Any help would be appreciated.
<style type="text/css">
body {
background-image:url(goku.jpg);
background-repeat:no-repeat;
background-attachment: 50% 60px;
}
</style>
Your background-attachment value is invalid, and you should add a background-sizesetting. In the snippet below I used cover to cover the whole screen, but you can also use other sizes. But then you should also add background-position
EDIT after comment: Well then just change to background-position: 50% 50%;. The image - if you don't use background-size will be displayed at its original size, and with that setting, be centered horizontally and vertically. If you don't like the vertical centering, change the second value to whatever you like, also in pixels, if you want.
html,
body {
margin: 0;
height: 100%;
}
body {
background-image: url(https://placehold.it./240x180/fb4);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 50% 50%;
}
<div>Test</div>
I'd like to have my banner fill up the top of the website completely, how do I do that? There are some gaps as shown in the photo. Here is my css:
<body>
<div id="headerbanner"></div>
<div class="container">
</div>
</body>
body{
background-image: url("../IMAGES/mountain1.jpg");
background-repeat: no-repeat;
background-size: cover;
}
#headerbanner{
height: 70px;
background-color:black;
background-attachment: fixed;
background-position: center top;
}
It's hard to pinpoint the exact issue as you haven't provided a great detail of detail, context or code, but I believe issue is that your background image doesn't cover the container.
Try the following CSS rule
background-size: cover;
Your new CSS would be:
#headerbanner {
height: 70px;
background-color:black;
background-attachment: fixed;
background-position: center top;
background-size: cover;
}
This should stretch the background image to fill the container, whilst retaining aspect ratio.
Try to not make the banner a background, that doesnt make sense.
instead use a fixed position and manually set it to 0px top, 0px right.
Consult this :
https://www.w3schools.com/cssref/pr_class_position.asp
NEXT THING TO CONSIDER:
Once you or your client has accessed the website, programmatically set the position, width and height depending on viewport of the client's browser. This can be accomplished with javascript, using the window.onload function.
I have following css :
.image{
background: url('image.png') no-repeat;
width:100%
}
My image size is small and I want this image to be stretched in full screen with repeating it .Please help me on this .
Thanks.
Use background-size: cover; ... but bear in mind that if it is a small image - then by stretching it the quality of the resulting background may be poor.
DEMO
CSS
div {
background: url('http://lorempixel.com/400/200/food') no-repeat;
width:100%;
height: 100vh;
background-size: cover;
}
In my jQuery mobile 1.4.0 app I have a Page which contains a list view the Problem is that when I have added a background image for this page as the list elements are becoming larger as the background stretchs with the content and this apears clearly on mobile devices more than jsFiddle ,this is my jsfiddle .
How can I make the background image to be fullscreen and fixed , not stretched with the content? Please help me ..
Here How I add a background image to my Page:
#EmPListPage{
background-image: url('http://images2.layoutsparks.com/1/218610/just-ducky-dots- pinky.gif') !important;
background-repeat: no-repeat;
background-size: 100% 100%;
}
#PageContent{
background: transparent ;
}
In my case the solution was to use contain, like this:
.ui-page {
background: #000;
background-image: url("http://bettingmasters.info/wp-content/uploads/2013/11/19757-football-stadium-1920x1200-sport-wallpaper.jpg");
background-size: contain;
}
You will want to attach the background image to the document body instead of your container div. Using your CSS in the fiddle:
body {
background-image: url('http://images2.layoutsparks.com/1/218610/just-ducky-dots-pinky.gif') !important;
background-repeat: no-repeat;
background-size: 100% 100%;
}
#EmPListPage, #PageContent{
background: transparent ;
}
Fiddle: http://jsfiddle.net/chucknelson/6zKJg/
I have three problems:
When I tried to use a background image in a smaller size div, the div shows only part of image. How can I show the full or a specific part of image?
I have a smaller image and I want to use in a bigger div. But don't want to use repeat function.
Is there any way in CSS to manipulate the opacity of an image?
Resize the image to fit the div size.
With CSS3 you can do this:
/* with CSS 3 */
#yourdiv {
background: url('bgimage.jpg') no-repeat;
background-size: 100%;
}
How Do you Stretch a Background Image in a Web Page:
About opacity
#yourdiv {
opacity: 0.4;
filter: alpha(opacity=40); /* For IE8 and earlier */
}
Or look at CSS Image Opacity / Transparency
To automatically enlarge the image and cover the entire div section without leaving any part of it unfilled, use:
background-size: cover;
This worked perfectly for me
background-repeat: no-repeat;
background-size: 100% 100%;
Try below code segment, I've tried it myself before :
#your-div {
background: url("your-image-link") no-repeat;
background-size: cover;
background-clip: border-box;
}
Rather than giving background-size:100%;
We can give background-size:contain;
Check out this for different options avaliable: http://www.css3.info/preview/background-size/
This will work like a charm.
background-image:url("http://assets.toptal.io/uploads/blog/category/logo/4/php.png");
background-repeat: no-repeat;
background-size: contain;
I agree with yossi's example, stretch the image to fit the div but in a slightly different way (without background-image as this is a little inflexible in css 2.1). Show full image:
<div id="yourdiv">
<img id="theimage" src="image.jpg" alt="" />
</div>
#yourdiv img {
width:100%;
/*height will be automatic to remain aspect ratio*/
}
Show part of the image using background-position:
#yourdiv
{
background-image: url(image.jpg);
background-repeat: no-repeat;
background-position: 10px 25px;
}
Same as the first part of (1) the image will scale to the div so bigger or smaller will both work
Same as yossi's.