I have created a responsive div that uses background-image, only problem is when I resize the browser window, the image leaves a white space below it.
HTML
html, body {
height: 100%;
width: 100%;
}
#container {
height: 100%;
width: 100%;
}
#background-image {
background-image:url('http://tiny.cc/pm334x');
height: 320px;
width: 100%;
display: block;
background-size: contain;
background-repeat: no-repeat;
}
CSS
<div id="container">
<div id="background-image"></div>
<p>Hello</p>
</div>
http://jsfiddle.net/qnwe098m/1/
At the moment I'm out of options, I have tried a number of different "solutions" but none have worked. I could go for creating multiple images, for different resolutions using media queries, but I'd rather keep it simple.
Many Thanks
Use cover as background-size instead of contain
background-size: cover;
html, body {
height: 100%;
width: 100%;
}
#container {
height: 100%;
width: 100%;
}
#background-image {
background-image:url('http://tiny.cc/pm334x');
height: 320px;
width: 100%;
display: block;
background-size: cover;
background-repeat: no-repeat;
}
<div id="container">
<div id="background-image"></div>
<p>Hello</p>
</div>
The snippet above may not actually show the difference, so here's the fiddle
Just use this code below to #background-image id
background-position:center;
background-size:cover;
Looks like you need:
background-size: cover;
rather than:
background-size: contain;
I have updated the fiddle.
http://jsfiddle.net/qnwe098m/2/
Have you tried:
#background-image {
background-image:url('http://tiny.cc/pm334x');
height: 320px;
width: 100%;
display: block;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
http://jsfiddle.net/qnwe098m/1/
Related
I'm working on a Shopify theme and wanted to add a media query to only the carousel images when viewport is under 1024px. Right now the images are 100% width and height and cropping on the left and right. I don't want the image to crop so I don't want to apply anything to the height.
This is the code from the theme:
.objFit {
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
img {
display: block;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
-o-object-position: center;
object-position: center;
font-family: 'object-fit: cover;object-position:center;';
}
}
And this is what I'm assuming I should add.
#media(max-width: 1023px) {
.objFit {
width: 100%;
position: relative;
overflow: hidden;
img {
display: block;
width: 100%;
-o-object-fit: cover;
object-fit: cover;
-o-object-position: center;
object-position: center;
font-family: 'object-fit: cover;object-position:center;';
}
}
}
I tried to switch the height and width so width came first but it broke the carousel.
I can't seem to get the preview to work to test my code so wanted to ask here first.
You can keep the height: 100% on both elements. Simply change cover to contain in your media query. You also do not need to repeat rules that remain the same in your media query.
I added two examples, one for a landscape orientation image and the other for portrait, so you can see what happens.
Here is the documentation on object-fit: https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
.objFit {
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
}
img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
#media (max-width: 1023px) {
.objFit img {
object-fit: contain;
}
}
<div class="objFit">
<img src="https://via.placeholder.com/900x300">
</div>
<div class="objFit">
<img src="https://via.placeholder.com/300x900">
</div>
Received a two column layout design for a website. Each column has a transparent background that, combined, forms a curved cut-out at the top.
I need the columns to grow with content, however this distorts the background image when set on background-size: cover (Matching things up in order to use repeat-y won't work either). Is there a good way to accomplish this, or a way to tell him absolutely not?
.middle-left-container {
float: left;
min-height: 500px;
position: relative;
left: 0;
bottom: 0;
background-image: url('/tlm-wp/wp-content/uploads/2016/11/left-menu-background-sliced.png');
background-repeat: no-repeat;
background-size: cover;
width: 20%;
}
body:not(.home) .middle-left-container {
top: 0;
background-image: url('/tlm-wp/wp-content/uploads/2016/11/left- menu-main.png');
}
.middle-right-container {
float: left;
min-height: 500px;
position: relative;
top: 0;
right: 0;
bottom: 0;
background-image: url('/tlm-wp/wp-content/uploads/2016/11/banner-bg.png');
background-repeat: no-repeat;
background-size: 100% 100%;
height: 100%;
width: 80%;
}
body:not(.home) .middle-right-container {
background-image: none;
background-color: #fff;
}
Thanks,
Matt
Don't put the curved bg image on the <body>, put it on a fixed-width container, then anchor the bg-image position.
.container {
width:900px;
margin:0 auto;
background-position: top center;
...
}
Then inside that container, put each of your column containers. Something like:
<div class="container">
<div class="sidebar-nav"> ... </div>
<div class="middle-left-container"> ... </div>
<div class="middle-right-container"> ... </div>
</div>
I got the following structure
<div class="container">
<div class="html5">
<h3>HTML5</h3>
</div>
<div class="pc"></div>
</div>
And the CSS
.pc {
position: absolute;
top: 81%;
left: 38%;
width: 321px;
height: 240px;
background-image: url('images/pc.png');
background-size: cover;
}
.html5 {
width: 321px;
height: 240px;
background-image: url('images/1.png');
background-size: cover;
position: absolute;
top: 44%;
left: 27%;
}
I want to put my .html5 positined in a certain point to .pc, is there any way to make it responsive so when resizing the web page I can still maintain it in the same distance to the other div?
I'm using bootstrap, don't know if there is any trick with one of his classes.JSFiddle
I don't think you can't with the current structure. I'd suggest something like this, and position .html5 relative to .pc.
.pc {
position: absolute;
...
}
.html5 {
position: relative;
...
}
<div class="container">
<div class="pc">
<div class="html5">
<h3>HTML5</h3>
</div>
</div>
</div>
Hi here is the initial solution, but if you are working with bootstrap then you need to add it's library and some pre-defined classes. Another option to make it responsive is using media query.
.pc {
width: 321px;
height: 240px;
background-image: url('http://cremc.ponce.inter.edu/carpetamagica/cuadradoquisosercirculo_files/image001.gif');
background-size: cover;
float:left;
margin-left:10%;
margin-top:10%;
}
.html5 {
width: 321px;
height: 240px;
background-image: url('http://2.bp.blogspot.com/-fId_0wMCKhg/Tz8dxylpK2I/AAAAAAAAJCE/7gF4evDn5zo/s1600/que%2Bes%2Bun%2Btriangulo.jpg');
background-size: cover;
float:left;
margin-left:10%;
margin-top:10%;
}
I need a "background text" like this > (EXAMPLE)
The text doesn't go up when I scroll down the page.
my .css for background image
html,
body {
font-family: 'Lato', sans-serif;
height: 100%;
background: url(../img/image-bg-jpg.jpg) center center no-repeat fixed;
webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
I'm using bootstrap 3.3
If i were you i would put the image in with an image tag, then position it fixed, like this:
<img class="img" />
.img{ min-width: 100%; min- height: 100%; position: fixed; z-index: 0; }
And then put your text in a div under it like:
<div class="div">text goes here</div>
.div{ margin-top: 100%;}
The text in that example is in a container with fixed positioning:
.jumbotron .container {
position: fixed;
width: 100%;
padding-top: 5%;
top: 50%;
transform: translateY(-50%);
}
<div class="container"></div>
You should acquaint yourself with the browser's document inspector to discover this type of thing.
I need to put HTML content within a page template. The section I have been given is within a Div container defining the size I have to work with. The CSS for the template defines margins of 17.5% left and right meaning I have 65% in the centre to input my content. This is ok for a majority of the content I need to include except the background image that needs to be full width (100%). I can attach a style sheet with my content however if I change the .wrapper element in my css it causes issues with the rest of the page. I also have to change the background image on a page by page basis so have to include the image path in the HTML and not in the CSS.
What I have so far is
HTML:
<div class="pageBackground">
<img src="img/festival-background.jpg">
</div>
CSS:
.pageBackground {
position: relative;
}
.pageBackground img {
width: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size:cover;
}
What would be a correct way to make my background image 100% of the page rather then container and behind the rest of my content?
Many thanks in advance!!!
This is entirely possible using the same techniques as detailed in this Q/A.
Essentially, using no additional HTML, we use an absolutely positioned pseudo-element as the background to the required section/div.
.extra {
position: relative;
}
.extra::after {
content: '';
position: absolute;
top:0;
width: 100vw;
height: 100%;
left:50%;
transform:translateX(-50%);
background-image: url(http://lorempixel.com/output/abstract-q-c-1000-250-5.jpg);
background-size: cover ;
background-repeat: no-repeat;
}
* {
margin: 0;
padding: 0;
}
.container {
width: 65%;
margin: auto;
border: 1px solid green;
}
section {
min-height: 100px;
border: 1px solid lightgrey;
}
.extra {
position: relative;
}
.extra::after {
content: '';
position: absolute;
top: 0;
width: 100vw;
height: 100%;
left: 50%;
transform: translateX(-50%);
background-image: url(http://lorempixel.com/image_output/abstract-q-c-100-100-1.jpg);
background-size: cover;
background-repeat: no-repeat;
}
<div class="container">
<section></section>
<section class="extra"></section>
<section></section>
</div>
Don't know if you have that kind of permission, but you could put img outside that div, and set them both on position absolute.
<img src="asdf>
<div class="wrapper">
CSS:
.wrapper {
position: absolute;
text-align: center;
width: 65%;
background-color: transparent;
height: 300px;
top: 50%;
left: 50%;
margin-top: -150px;
margin-left: -32.5%;
}
img {
position: absolute;
top: 50%;
width: 100%;
height: 50px;
background-color: gray;
}
jsFiddle
In your CSS, add the background image to the body property and then put the rest of your site in an entire container div, within which all other properties will reside.
HTML:
<body>
<div class="entireSite">
Site content goes here.
</div>
</body>
CSS:
.body {
background-image:url("img/festival-background.jpg");
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size:cover;
}
.entireSite {
position: absolute;
z-index: -1;
}