I try to make background with image, this image
I have this code (page on bootstrap).
.cover-losos{
background: url('http://patwoj.hekko24.pl/zdrowie/images/losos.jpg') no-repeat center center;
-webkit-background-size: 100%;
-moz-background-size: 100%;
-o-background-size: 100%;
background-size: 100%;
}
<div class="container-fluid">
<div class="row">
<div class="col-md-12 cover-losos">
</div>
</div>
</div>
Why isn't the photo showing? What am I doing wrong?
Your issue is not the background. Your div where you set the background has neither a width nor a height set meaning that the size of the background image is 100% of 0px.
try adding a width and height to your cover-losos div.
.cover-losos {
background: url('https://placeimg.com/640/480/any') no-repeat center center;
-webkit-background-size: 100%;
-moz-background-size: 100%;
-o-background-size: 100%;
background-size: 100%;
width: 100%;
height: 300px;
}
<div class="container-fluid">
<div class="row">
<div class="col-md-12 cover-losos">
</div>
</div>
</div>
Related
I'm working on a website and in a particular section, I want a blue background image to appear for half the section but no matter what I do in terms of CSS, absolutely nothing works.
I've made so many attempts that it's too many to list. What am I doing wrong and how can I fix it?
Here's my html code:
<div class="row secOne secT">
<div class="myImage col-md-6"></div>
</div>
Here's my css code:
.row.secOne.secT {
padding-top: 20px;
}
.myImage {
background-image: url("https://images.pexels.com/photos/281260/pexels-photo-281260.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500");
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
I've tried creating a simple html file using your code and by applying
background-size: 50% 100%;
background-repeat: no-repeat;
on the item having the desired image background I got something that seems your desired result.
Full code sample
<html>
<head>
<style>
.col-md-6 { /* Added this definition in order to get a visible div */
width: 800px;
height: 100px;
border: 1px solid black;
}
.row.secOne.secT {
padding-top: 20px;
}
.myImage {
background-image: url("https://images.pexels.com/photos/281260/pexels-photo-281260.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500");
-webkit-background-size: 50% 100%;
-moz-background-size: 50% 100%;
-o-background-size: 50% 100%;;
background-size: 50% 100%; /* Force background size to only fill half the div */
background-repeat: no-repeat; /* Avoid background repetitions */
}
</style>
</head>
<body>
<div class="row secOne secT">
<div class="myImage col-md-6">
AAAAA
</div>
</div>
</body>
I think you can try this : https://i.stack.imgur.com/fdk00.png
Try this too - https://i.stack.imgur.com/meURR.png
I hope it helps you - sorry if it does not.
You can make appear the blue background of your URL, setting the height CSS property
.row.secOne.secT {
padding-top: 20px;
}
.myImage {
background-image: url("https://images.pexels.com/photos/281260/pexels-photo-281260.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500");
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height: 22em;
}
<div class="row secOne secT">
<div class="myImage col-md-6"></div>
</div>
Hope it helps!
I've added an background to a div class. What I want is for the image height to always have the same height as the browser window, which I tried to achieve with min-height= 100%. I don't get it to work though.. Any suggestions?
HTML:
<div id="top" class="jumbotron">
</div>
CSS:
.jumbotron {
background: no-repeat center center url('top.jpg');
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
min-height: 100%;
margin: 0px;
}
Add this to your jumbotron class:
min-height: 100vh;
Working fiddle: https://jsfiddle.net/dgo3sz0a/
The body and the html have to fill the 100% height:
html, body {
height: 100%
}
I have a picture I have to use for a fullsize cover picture for a landingpage. The picture is 3680 * 2456px. When I set the picture in my code, the picture is zooming, which means I can see the half of the picture. Therefore I tried to resize it to 1024 * 683 px, which resultet in that my picture filled the half of the banner.
How can I make my picture fit my banner, so it is not zooming?
.fullscreen {
width:100%;
min-height:100%;
background-repeat:no-repeat;
background-position:50% 50%;
background-position:50% 50%\9 !important;
background-image:url(/img/seminar/bg.jpg);
background-size
}
.overlay {
background-color: rgba(0, 0, 0, 0.5);
position: relative;
width: 100%;
height: 100%;
display: block;
}
<div class="fullscreen landing parallax">
<div class="overlay">
<div class="container">
<div class="row">
<div class="col-md-7">
<!-- /.logo -->
<div class="logo"><img src="http://site.dk/img/site-logo-white.png" alt="logo"></div>
</div>
</div>
</div>
</div>
</div>
Try:
.fullscreen {
background: url(/img/seminar/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
instead of your original .fullscreen CSS.
This snippet of code can be found via CSS Tricks website.
This should work. Set the image height and width to 100%
<img src="http://site.dk/img/site-logo-white.png" alt="logo" style="width: 100%; height: 100%;" />
Edit: To do that in CSS try this
.fullscreen img {
width: 100%;
height: 100%;
}
I don't know why but somehow there's a background gap in the middle so the background image is divided by the content in the middle. Could you help me out?
Here's the HTML Code:
<div class="pertama">
<div class="jumbotron">
<div class="container">
<h1>Aceh Bus App</h1>
<hr class="light">
<h2>Satu Aplikasi. Semua Bus</h2>
<button class="btn">
Tentang Aceh Bus App
</button>
</div>
</div>
Here's the CSS Code:
.pertama {
background: url('../img/bgbl.jpg') center center no-repeat;
background-size: cover;
height: 90%;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
position: relative;
padding-top: 180px;
text-align: center;
}
It looks like this:
You have to remove background from your jumbotron element:
.jumbotron {
background: none;
}
How i can modify #bg image so it would be responsive, resizable and proportional in all browser?
HTML:
<div class="container">
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-8 col-sm-6 col-xs-12 well" id="bg">
</div>
<div class="col-md-2"></div>
</div>
</div>
css:
#import url('bootstrap.min.css');
body{
background: url('../img/bg.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
margin-top: 12%;
}
#bg{
background:url('../img/con_bg4.png') no-repeat center center;
height: 500px;
}
I found a solution.
background-size:100% auto;
You might also try:
background-size: cover;
There are some good articles to read about using this CSS3 property: Perfect Full Page Background Image by CSS-Tricks and CSS Background-Size by David Walsh.
PLEASE NOTE - This will not work with IE8-. However, it will work on most versions of Chrome, Firefox and Safari.
Try this (apply to a class you image is in (not img itself), e.g.
.myimage {
background: transparent url("yourimage.png") no-repeat top center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: 100%;
height: 500px;
}
I had the similar issue and i solved it using:
background:url(images/banner1.png) no-repeat center top scroll;
background-size: 100% auto;
padding-bottom: 50%;
...
here i had to add the padding: 50% because it wasn't working for me otherwise. It allowed me to set the height of container, as per the size ratio of my banner image. and it is also responsive in my case.
I believe this should also do the job too:
background-size: contain;
It specifies that the image should be resized to fit within the element without losing it's aspect ratio.
The way to do this is by using background-size so in your case:
background-size: 50% 50%;
or
You can set the width and the height of the elements to percentages as well
This should work
background: url("youimage.png") no-repeat center center fixed;
-webkit-background-size: 100% auto;
-moz-background-size: 100% auto;
-o-background-size: 100% auto;
background-size: 100% auto;
Don't use fixed:
.myimage {
background:url(admin-user-bg.png) no-repeat top center;
background: transparent url("yourimage.png") no-repeat top center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: 100%;
height: 500px;
}
Mby bootstrap img-responsive class is you looking for.