I've divided my web page to left and right container(it's working fine). I made new class in div called "user-cover-container" and it only needs to put cover image on the top left side of the page.
Image is in the same folder as css and HTML file. HTML and css files are merged correctly.
.user-cover-container{
height: 200px;
width: 100px;
background-image: url("bck.jpg");
background-size: cover;
}
<div class=”user-cover-container”> </div>
Please check the inverted commas for class attribute in HTML. Change them to - " "
.user-cover-container{
height: 200px;
width: 100px;
background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTlhiyjToS4vgqPDf_ip_MdI8B7RKbfOlCCLsb9qH8d1PPN-rj5TA");
background-size: cover;
}
<div class="user-cover-container"> </div>
you have missed the "". add this to your code.
<div class="user-cover-container">test </div>
.user-cover-container{
height: 200px;
width: 100px;
background-image: url("https://www.w3schools.com/w3css/img_forest.jpg");
background-size: cover;
color: white;
}
<div class="user-cover-container">test </div>
Related
I was trying to put background image but it is not showing.
.jumbotron{
background-image: url("/src/assets/shop1.png");
background-size: cover;
}
<div class="jumbotron">
Welcome to Home Page
</div>
The background image will look at the height and width of the div. Please follow the code to see the image.
.jumbotron {
background-image: url('https://imgsv.imaging.nikon.com/lineup/dslr/df/img/sample/img_01.jpg');
background-size: 100% 100%;
height: 100px;
width: 100%;
background-repeat: no-repeat;
}
Working demo
I'm trying to add a background image to one and colour to another div class using css style. However the image is not showing at all, not sure what the problem is..
HTML:
#{
ViewData["Title"] = "Home Page";
Layout = "~/Views/Shared/_DefaultLayout.cshtml";
}
<div class="parralax">
</div>
<div class="home-parralax-sub-section">
</div>
Here is my CSS:
.parralax {
background: url(../../../../images/Resources/MainImage2.jpg);
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}
.home-parralax-sub-section{
height: 100px;
background-color: red;
}
Now if I add the image or colour directly to the div like that:
<div class="parralax" style="height: 500px; color: red;">
</div>
<div class="home-parralax-sub-section" style="height: 1000px;">
<img src="~/images/Resources/MainImage.jpg" />
</div>
It will work!
Any help would be appricated, thanks :).
Try this
.parralax {
background: url(http://via.placeholder.com/350x150);
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
height: 150px;
/*Add to this div height*/
}
.home-parralax-sub-section {
height: 100px;
background-color: red;
}
<div class="parralax">
</div>
<div class="home-parralax-sub-section">
</div>
Add height to div containing the background-image
You have to add height to .parallax class then it will work.
.parralax {
background: url('../../../../images/Resources/MainImage2.jpg');
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
height:500px;
}
.home-parralax-sub-section{
height: 100px;
background-color: red;
}
I have a background image set as a background, and I want it so, when the user scales down the window, it will resize with it:
HTML:
<div class="parallax">
</div>
CSS:
.parallax {
background-image: url("../Images/back1.jpg");
min-height: 700px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
padding: 100px 20px;
}
I got it to work when I changed background-size: cover; to contain, but it cuts out some of the image from the left and right side.
Fiddle Link : here
In addition to my comments, here is what I wrote about in the last comment - a regular img tag with width: 100%and height: auto instead of a background-image:
img {
width: 100%;
height: auto;
}
<div>
<img src="https://wallpaperscraft.com/image/coffee_hand_glass_scarf_113704_1366x768.jpg">
</div>
The code below makes the background image responsive too when a window is resized. I have updated your css code, removed min-height and background fixed and made the padding percentage in top and bottom.
.parallax {
background: url(https://wallpaperscraft.com/image/coffee_hand_glass_scarf_113704_1366x768.jpg) no-repeat center / cover;
padding: 30% 0;
}
<div class="parallax">
</div>
I am having trouble setting a background image for bootstrap jumbotrons. My main.css comes after the bootstrap css and I am selecting the jumbotron using a class called "banner" which is in the same div as the jumbotron, but it still doesn't work. Here is my code...
HTML:
<!-- Banner -->
<div class="jumbotron banner">
<div class="container">
<hgroup>
<h1>
Bits king
</h1>
<h2>
Web Design & Development
</h2>
</hgroup>
</div>
</div>
CSS:
.banner {
height: 400px;
width: 100%;
max-height: 50%;
max-width: 100%;
min-height: 20%;
min-width: 30%;
background-image: url("../assets/images/banner.jpeg");
background-size: cover;
}
You can add a background-image property to the .jumbotron class in your custom css file (Make sure you reference your custom css file after Bootstrap. Here's an example:
.jumbotron {
background-image: url("/img/your-image.jpg");
background-color: #17234E;
margin-bottom: 0;`enter code here`
min-height: 50%;
background-repeat: no-repeat;
background-position: center;
-webkit-background-size: cover;
background-size: cover;
}
add "jumbotron-custom" to class attribute and apply this after "bootstrap" css :
.jumdotron-custom
{
background: url('/*background url*/') no-repeat !important;
}
..or just add !important to your 'background-image' of css.
Good Morning. Try this:
background-image: url("../assets/images/banner.jpg");
Let me know if it works or not?
I'm currently trying to figure out if it is at all possible to show and hide the background image on a div with a hover state.
Here's some code:
HTML
<div class="thumb">
<div class="text">
Header<br>
Sub-header<br><br>
Date
</div>
</div>
<div class="thumb">
<div class="text">
Header<br>
Sub-header<br><br>
Date
</div>
</div>
<div class="thumb">
<div class="text">
Header<br>
Sub-header<br><br>
Date
</div>
</div>
CSS
.thumb {
width: 400px;
height: 250px;
background-color: silver;
font-weight: bold;
background: url("http://www.imageurlhere.com") no-repeat 50% 50%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.text {
padding: 15px;
}
So essentially I want to alternate between a background image and the background color, so when you hover over the div the background image is show, and on mouseout the background image is hidden and you revert to the background colour (silver).
I found this was do-able via pseudo classes but as this is for a CMS site the images will be changed on the fly, therefore they'll have to be inserted via html:
style="background-image: url('insert url here')"
Is this at all possible to hide and show the background-image?
Is there any reason you cannot use the :hover pseudo-class to make the image appear/disappear when hovered?
For example:
div {
background-image: none;
}
div:hover {
background-image: url('insert url here');
}
Are you against using Javascript (or jQuery)?
If not, I have a solution using the .hover() function in jQuery. You said you didn't want to add new classes for new images. So I'm proposing you store the urls in the .thumb elements.
HTML:
<div class="thumb" data-hoverimage="http://placekitten.com/250/400">
<div class="text">Header
<br>Sub-header
<br>
<br>Date</div>
</div>
<div class="thumb" data-hoverimage="http://placekitten.com/250/300">
<div class="text">Header
<br>Sub-header
<br>
<br>Date</div>
</div>
<div class="thumb" data-hoverimage="http://placekitten.com/400/250">
<div class="text">Header
<br>Sub-header
<br>
<br>Date</div>
</div>
I stored each thumbnail's url in the data-hoverimage attribute (it can be whatever you want).
Then, using jQuery, we can use the hover function. The first function is for when the cursor is over, the second for when the cursor is out.
$(".thumb").hover(function(){
var imgurl = $(this).data("hoverimage");
$(this).css("background-image", "url(" + imgurl + ")")
}, function(){
$(this).css("background-image", "");
});
I have a working model here: http://jsfiddle.net/auURQ/
use this css
.thumb:hover{
background: url("http://www.imageurlhere.com") no-repeat 50% 50%;
}
.thumb {
width: 400px;
height: 250px;
background-color: silver;
font-weight: bold;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.text {
padding: 15px;
}
if you have different image per Div You have two way for this
1)make a share css for them and dedicated css for on hover image
#thumb1:hover{
background: url("http://www.imageurlhere.com") no-repeat 50% 50%;
}
#thumb2:hover{
background: url("http://www.imageurlhere.com") no-repeat 50% 50%;
}
.thumb {
width: 400px;
height: 250px;
background-color: silver;
font-weight: bold;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.text {
padding: 15px;
}
another way is use JS or JQuery Lib for set hover Event ,...