I am not able to understand why in the background the image is not getting displayed.
body{
background-image: url('../Images/Chicken.jpeg');
background: cyan;
}
The path of the image is right. whats the problem then? but the background color is getting being displayed.
Because you override an image with the color. If you want to use them both:
body{
background-image: url('../Images/Chicken.jpeg');
background-color: cyan;
}
or you can combine them in to one line:
body{
background: cyan url('../Images/Chicken.jpeg');
}
.main {
background-image: url('https://image.shutterstock.com/image-photo/beautiful-water-drop-on-dandelion-260nw-789676552.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
height: 100vh;
}
<div class="main">
</div>
Related
I am a beginner in html and CSS I was trying to modify my old project by adding a background image and I want the image to take the size of screen while remaining still while I scroll up or down
here is my code
'''
body {
background-image: url(https://lh3.googleusercontent.com/3WHvvnFSspZKbbRkM9SgvIUMDs6efWS5vXgmSglvoHASfV4TUhIFSXd77Ic9x02zAmyrMwpg-py0YceJYVLLCK9SpU9YQU56rm-uTBKb2KoTW3dnjpgVLvhJ26koIF-VXlzao11v=w2400);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
h1, h2 {
text-align: center;
}
.catphoto {
text-align : center;
}
'''
You can do this with the background-attachment property in CSS.
Example:
body {
background-image: url(https://picsum.photos/1080/1920);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
height: 300vh;
}
.cover {
background-color: aqua;
height: 50vh;
margin-top: 90vh;
padding: 20px;
}
<div class="cover">
(covering up so you can see the effect)
</div>
This fixes the position of the background to a specific place, like an element with the position of it set to fixed. It can easily be ported to your code by adding a single line in the CSS.
background-attachment: fixed;
More information about background-attachment: MDN web.dev
How can I disable responsive background img behavior ?
My background img in larger screen is like this :
And I want this behavior when I resize screen (small screens). (I want that the img will be cut automatically) : does a css property exist for this ?
My code is :
.bg {
background-image: url(assets/images/bg.png,
background-repeat: no-repeat;
}
<div class="container-full bg">
<div class="container">
<div>My content....</div>
</div>
I am in bootstrap project , and my background img is responsive, how can I disable this please ?
here is a quick cutout. You can position the image left, center or right. The image will be trimmed automatically.
You can define the height for yourself.
body {
margin: 0;
}
.bg {
background-image: url("https://i.stack.imgur.com/jtaEI.png");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
height: 400px;
}
<div class="bg">
<div>My content....</div>
</div>
edit
Please be aware that you need semicolons in .css after each declaration
your code:
.bg {
background-image: url(assets/images/bg.png,
background-repeat: no-repeat;
}
need to look like this:
.bg {
background-image: url("assets/images/bg.png");
background-repeat: no-repeat;
}
I am having difficulty trying to make the logo at the top of my web page change when I hover over it.
To be more specific, I have a logo at the top of my page, and I created another logo slightly different for when a user hovers over it.
Here is my code:
#top{
width:1366px;
height:100px;
background-color:#1e125b;
}
body{
background-color:white;
background-repeat:repeat;
margin: 0;
}
#top:hover{
background-image: url('Logo_hover.png');
}
The Logo_hover multiplies itself throughout the whole div, instead of simply changing the initial image. I understand that the background-image is not what I should be using for this problem but I cannot seem to find any other solutions.
#top:hover{
background-image: url('Logo_hover.png');
background-repeat: none
}
have you used this.onmouseover & this.onmouseout ?
<img src='your pic' onmouseover="this.src='your pic on mouse over';" onmouseout="this.src='your pic on mouse out';" />
.logo {
background-image: url("http://placehold.it/120x120&text=image1");
background-repeat: no-repeat;
height: 120px;
width: 120px;
}
.logo:hover{
background-image: url("http://placehold.it/120x120&text=image2");
background-repeat: no-repeat;
height: 120px;
width: 120px;
}
<div class="logo"></div>
#top{
background-image: url(logo.png);
background-repeat: no-repeat;
background-size: cover;
overflow:hidden;
width: 120px;
height: 120px;
}
#top:hover{
background-image: url(logo_hover.png);
}
I have an image that I am showing on a page. Here is my css:
body {
background: url(./../imgs/beach.png) no-repeat;
background-size: 100%;
}
When I do this, everything shows just fine. I then try to show the same image in a div. Here is my html:
<body>
<div class="background-image"></div>
</body>
And here is my new css:
.background-image {
background: url(./../imgs/beach.png) no-repeat;
background-size: 100%;
}
But now nothing shows. I look in my network tab and I see that the image is available, but it is not showing on the page. What am I doing wrong?
It's because the div is 0 pixels tall, give it some height, for example:
.background-image {
background: url(./../imgs/beach.png) no-repeat;
background-size: 100%;
height: 100vh;
}
Since you are only using background you need to set a height/width on the div itself.
.background-image {
background: url(./../imgs/beach.png) no-repeat;
background-size: 100%;
height: */Your Value/*;
}
I would suggest remove background-size: 100%; .. instead add height and width as 100%.
body {
background: url(./../imgs/beach.png) no-repeat;
height: 100%;
width: 100%;
}
I am trying to give a div class the background image of a header but it won't show up.
Please see:
http://jsfiddle.net/eqzro6s3/
[css]
.header
{
background-image: url('http://wpsites.net/wp-content/uploads/2013/12/Custom-Header-Image.png') no-repeat;
width: 100%;
}
[html]
<div class="header">
</div>
What am i doing wrong? Thanks in advance.
Elements with backgrounds need to have dimensions. They don't automatically size themselves to the background image.
.header
{
background-image: url('http://wpsites.net/wp-content/uploads/2013/12/Custom-Header-Image.png') no-repeat;
width: 100%;
height: ?????
}
background-image is just not a short-hand property, thus you cannot use more than one value:
.header
{
background-image: url('path.png');/* remove no-repeat from here*/
background-repeat: no-repeat; /*use no-repeat here*/
width: 100%;
}
Or, use it like this:
.header
{
/*short-hand method can have multiple values*/
background: url('path.png') no-repeat;
width: 100%;
}
Try this:
.header
{
background: #FFFFFF url('http://wpsites.net/wp-content/uploads/2013/12/Custom-Header-Image.png') left center no-repeat;
width:100%;
height:431px;
}
http://jsfiddle.net/csdtesting/eqzro6s3/1/
Js Fiddle
.header{
background: url('http://wpsites.net/wp-content/uploads/2013/12/Custom-Header-Image.png') no-repeat;
width: 100%;
height:432px;
}
change background-image: to background: