my background image on the div looks too zoomed and is not clear it loses it clarity
this the html and styling that i've tried
<div class="grid-x intro">
<div class="cell large-12 medium-12 small-12 one">
</div>
</div>
<!-- end of intro -->
styling
.intro{
background-image: url("../images/house4.jpg");
background-size: cover;
background-repeat: no-repeat;
width: 100%;
/* height: auto; */
padding-top: 66.64%;
}
It's okkey in here ... use "background-size: 100% auto;"
This is because your image is more wider then height & u used background-size: cover; . To cover all background, that's why it's zoomed and cropped rest width
Your code is okkey, just use resized image like 500px*333.2px (or around this ratio) to show all image inside 66.64% padding
.intro{
background-image: url("https://image.freepik.com/free-vector/geometric-models-gradient-background_23-2148326516.jpg");
background-size: 100% auto;
background-repeat: no-repeat;
width: 100%;
/* height: auto; */
padding-top: 66.64%;
}
<div class="grid-x intro">
<div class="cell large-12 medium-12 small-12 one">
</div>
</div>
<!-- end of intro -->
May be the quality of the image is not great. Or if you don't need full covered background, you can shrink the background image by doing
background-size: 50%;
Related
I want to scale the images inside a container image to be proportionate to their parent. I am making a card game with bootstrap styling. I have a card table image as the background image of a container (1000x1000). When I make the browser window smaller, it reduces the card table image size to 800x800 then 500x500 then 200x200.
How can I make it so that the child pictures (100x70) will also reduce at the same ratio of its parent container?
.game-box {
height: 1000px;
position: absolute;
left: 0;
background: url('../table/tbltop.jpg') no-repeat;
-webkit-background-size: 100% auto;
}
<div class="container game-box">
<img id="p1" class="war card">
</div>
#imgContainer{
background-image: url("your image url goes here");
background-size:100% 100%;
background-repeat: no-repeat;
}
keep in mind your image could be not proportional but its size will be equal to the div width and the div height.
that should get you started....
If you want to reduce only width.
.container{
height: 100vh;
background-image: url("https://www.belightsoft.com/products/imagetricks/img/intro-video-poster#2x.jpg");
background-size:100% 100%;
background-repeat: no-repeat;
}
<div class="container game-box">
<img id="p1" class="war card">
</div>
if you want to reduce height/width both.
.container{
height: 100vh;
background: url('https://www.belightsoft.com/products/imagetricks/img/intro-video-poster#2x.jpg') no-repeat;
background-size: 100% auto;
}
<div class="container game-box">
<img id="p1" class="war card">
</div>
This is using flex-box to arrange the cards. You might want to experiment with different variants of justify-content. I've hard coded the width and height of the main container, which you won't want to do in reality, but you can see the resize effect by changing those values. I've set each card container to 10% of total width and height. Again, you may want to change that.
HTML:
<body>
<div class="container game-box">
<div class="card-wrapper">
<img id="p1" class="war card" src="https://dummyimage.com/70x100/000/fff">
</div>
<div class="card-wrapper">
<img id="p1" class="war card" src="https://dummyimage.com/70x100/000/fff">
</div>
</div>
</body>
CSS:
.game-box{
height: 1000px;
width: 1000px;
position: absolute;
left: 0;
background: url("https://dummyimage.com/1000x1000/f00/aaa") no-repeat;
-webkit-background-size: 100% auto;
display: flex;
justify-content: space-around;
}
.card-wrapper {
width: 10%;
height: 10%;
}
.card {
width: 100%;
}
I am facing a simple problem that is taking up a lot of my time.
I have a simple CSS that defines an image as background:
#header-content{
background-image: url("../images/header-img.png");
background-repeat: no-repeat;
background-position-x: center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
And the div in a HTML page that has this ID:
<!-- HEADER -->
<div id="header">
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div id="header-content">
</div>
</div>
</div>
</div>
</div>
<!-- HEADER -->
Very simple. But the image is not shown. What could be the problem?
P.S.: The image directory is correct.
Your problem could be that the #header-content div doesn't have any size. Try adding: height: 100px; width: 200px
#header-content{
background-image: url("http://unsplash.com/photos/1-ISIwuBMiw/download");
background-repeat: no-repeat;
background-position-x: center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height: 100px;
width: 200px;
}
<!-- HEADER -->
<div id="header">
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div id="header-content">
</div>
</div>
</div>
</div>
</div>
<!-- HEADER -->
There is no need to set width ( the default for DOVs is 100%), but if you don't have any content in that DIV, you have to set a height value for that DIV to see a background (if not, it's 0px high = not visible).
Set height and width to your #header-content.
Also, when setting the height, try a different measuring unit than percentage(%) because percentage might not work correctly sometimes and it'll make it not to show as well. You can use px or vh.
Because you haven't defined width and height in your css code.
For example, add these width: 400px; height: 400px; to the first of #header-content {}, and it works. you can also do it for body or even HTML tag without using width and height properties.
I have a div on the top of the page that is assigned a parallax image, when the view port is not that wide the image is not responsive, how can I make the background image responsive ?
#parallax{
height:100vh;
background:url("../images/keyboard.jpg");
background-size: cover;
background-attachment: fixed;
}
<div id="parallax">
<div class="col-md-1"></div>
<div id="profile" class="bottom-align col-md-4">
</div>
</div>
and here are the screenshots of what I mean by unresponsive
basically I want "web site" to show when the view port is not wide as well instead of "WE"
background-size: cover is scaling your background image to fill the whole height of the containing element which on a mobile device is tall and narrow, cropping the image.
You should either use background-size: contain instead of cover, or allow the containing element to shrink to less than 100vh. The caveat with the former is you need to figure out what to fill the rest of the container with.
Here's an example:
.target {
background: url(http://placekitten.com/300/100);
background-position: center center;
background-color: teal;
background-size: cover;
background-repeat: no-repeat;
height: 150px;
width: 100px;
}
.better {
background: url(http://placekitten.com/300/100);
background-position: top center;
background-color: teal;
background-repeat: no-repeat;
background-size: contain;
height: 150px;
width: 100px;
}
<html>
<body>
Cover:
<br>
<div class="target"></div>
Contain:
<br>
<div class="better"></div>
<div>
Original:
<br>
<img src="http://placekitten.com/300/100" ?>
</div>
</body>
</html>
Have your image width be 100%. I put the image tags inside the divs to represent screen sizes.
<div style="width:20%">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/86/Triforce.svg/691px-Triforce.svg.png" style="width:100%">
</div>
<div style="width:40%">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/86/Triforce.svg/691px-Triforce.svg.png" style="width:100%">
</div>
<div style="width:60%">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/86/Triforce.svg/691px-Triforce.svg.png" style="width:100%">
</div>
<div style="width:80%">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/86/Triforce.svg/691px-Triforce.svg.png" style="width:100%">
</div>
<div style="width:100%">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/86/Triforce.svg/691px-Triforce.svg.png" style="width:100%">
</div>
A straightforward solution would be :
Make your body size stretch to the whole view-port
body{
width:100%;
height:100%;
/* on the example due to some overflow I've used 97% to prevent scroll bars
....
make your background image fill the body element
background-image:url(...);
background-position:cover;
And that's it,
To live a white space for your header offset your image position down, by the width of your header.
background-position:50px;
The inconvenience is when you want to have actual content you can't rely on the same style sheet for the other pages, you have to change it.
Of course you won't see any responsiveness in the example here because the way the snippet is in a fixed width container. But it has work as expected when tested. (at least you can see how the image is stretched compared to the original one here )
.header{
border:solid ;
width:100%;
height:50px;
text-align:center;
}
body{
width:97%;
height:97%;
background-repeat:no-repeat;
background-image:url(https://i.stack.imgur.com/AWVa6.jpg);
background-position:0 50px;
background-attachment:fixed;
background-size:cover;
}
<div class="header">your header or navigation bar</div>
I have a page in which I am using bootstrap for designing. Now I am using grids; I want to keep 8 columns for my image and 4 columns for the text. So i have following code:-
<div class="container-fluid">
<div class="row">
<div class="col-md-8">
<div class="bg"></div>
</div>
<div class="col-md-4">
hi how are you
</div>
</div>
</div>
Following is the css for class bg :
.bg {
background-image: url('../images/2.jpg');
background-repeat: no-repeat;
background-position: center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height:690px;
}
Now everything works fine, but I am facing a small problem here where i am checking this in extra small screen, the picture occupies almost the entire screen and for text i have to scroll way to the bottom.
Is there any way to adjust image height(width works perfectly fine) for extra small screens so that image and text can be seen together without much scrolling?
Try using viewport-height in CSS3:
.bg {
height:100vh;
}
do like this.give div class name as img-responsive and set width and height as your need.and put your image inside it and set its width and height like this.
<div class="img-responsive" style="width: 300px;height: 300px;">
<img style="width: 100%;height: 100%" src="http://www.intrawallpaper.com/static/images/1250654-for-laptop-nature.jpg"/>
</div>
if you want text over picture, you can do this:
#media (max-width: 480px) {
.bg {
position: absolute;
left: 0;
width: 100%;
}
}
if you want half top is picture, half bottom is text, you can do this:
html
<div class="container-fluid">
<div class="row">
<div class="col-md-8">
<div class="wrap">
<div class="bg"></div>
</div>
</div>
<div class="col-md-4">
hi how are you
</div>
</div>
</div>
css
#media (max-width: 480px) {
.wrap {
position: relative;
padding-bottom: 50%;
}
.bg {
position: absolute;
left: 0;
width: 100%;
height: 100%;
}
}
hope it can help
My ultimate goal is to have a block of text in a fixed position relative to a background image.
But what seems to be preventing this is that when I resize the browser, the image stays the same size like I want, but the image shifts -- i.e., the top of the image rendered isn't always the top of the image source.
Here's a mockup - imagine that I want the block of text to be in the blue box:
http://jsfiddle.net/rrauenza/9hkn8p4e/embedded/result/
The yellow "ceiling" in this picture sometimes disappears for different browser sizes.
<head><style>
.intro-header {
text-align: center;
color: #f8f8f8;
background: url(http://c3softworks.com/demos/images/backgrounds_04.jpg) no-repeat center top;
background-size: cover;
background-position: center top;
height: 700px;
}
.intro-message {
position: relative;
padding-top: 100px;
height: 700px;
}
</style></head>
<div class="intro-header">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="intro-message">
<h1>Title</h1>
<h3>...subtitle</h3>
<hr class="intro-divider">
<div class="col-lg-2 col-lg-offset-3">
<h4>Something</h4>
</div>
<div class="col-lg-2 col-lg-offset-2">
<h4>Something Else</h4>
</div>
</div>
</div>
</div>
</div>
</div>
Remove:
background-size: cover;
If you're counting on the background image not to scale it might help not to ask it to.
Also, in your fiddle .intro-header has a background-position:center bottom, while here you post center top. It needs to be center top of course.