how to put backgound image with help of css.
When an image file is stored locally on a desktop, CSS file and image are in the same folder. \Desktop\New folder\image:- image destination
\Desktop\New folder\css:- css file destination
You can provide just the local image name, assuming it is in the same folder and your css is applying then this should help you:
background-image: url("image_name.png")
use background: url() in css for this
body {
background: url("https://www.w3schools.com/howto/img_fjords.jpg");
background-size: 80px 60px;
background-repeat: no-repeat;
padding-top: 40px;
}
Technically, local files are not accessible from CSS. All the file you want to access should be accessible using URI.
Related
May I ask on how to add photo background on my website using VS Code?
I tried checking in yt but its not background, it just add up to my website as photo alone.
In css:-
background-imge:url("");
i think this maybe helpful for everyone.
using css background-image: url("url") // it is the best practice
but you will have to also set some addtional css properties like
.div{
background-image: url("../images/demo.png");
background-repeat: no-repeat;
background-size: 300px 400px;
background-origin: content-box;
background-position: center;
}
try these
the url can be a link to some hosted image file or
it can be a local image as showed in the example try these
Accept the answer if this helps
I am using html and css to create a website for my school project.
I was writing my script by using vscode and everything was fine on the live-server page.
Live Server
However, when I ran the actual .html file through my browser, it appeared differently from my live-server page.
.html file
I think some wrong with {background-image: url("/images/banner.jpeg");} this tag but I'm not sure. Please help!
<div class="banner"></div>
.banner {
background-image: url("/images/banner.jpeg");
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-position: center;
padding: 200px 1px;
min-height: 20%;
}
Use a relative and not absolute file path: background-image: url("images/banner.jpeg");
More info: Discrepancy between VS Code live server output and opening the index.html file by itself
So, I'm planning to give a div a background image.
Here's the path for the picture i want to use :
website\images\logo.png
And here's the path for the html and css file :
website/index.html
website/style.css
Here's the html code :
<header>
<div class="logo"></div>
</header>
Here's the css code :
header .logo {
width: 45px;
height: 40px;
background-image: url('../images/logo.png');
}
But the image still won't display in the background of the div and instead I get this error when i inspect and click the consol tab :
Not allowed to load local resource:
I also tried different variations such as :
background-image: url(../images/logo.png);
background-image: url(./images/logo.png);
background-image: url('./images/logo.png');
background-image: url('/images/logo.png');
background-image: url(/images/logo.png);
background-image: url('images/logo.png');
background-image: url(images/logo.png);
and all of them doesn't seem to work
I also tried to give the div a background color and it seems to work just fine.
What is the solution? Thank you
I think this might be the issue with getting source from localhost, if you are using VScode then try installing this extension called Live Server May be, it could fix the issue. take a look: https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer
I am creating a react app when I want a particular section to have a background image that I have in my images folder which is inside the public folder. Accessing those images seems to be working except for when I try to access them from App.css
Error: Failed to compile.
./src/App.css (./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-4-1!./node_modules/postcss-loader/src??postcss!./src/App.css)
Error: Can't resolve '/images/img-2.jpg' in 'C:\Users\shlok\OneDrive\Desktop\React\react-website-1\src'
App.css
.services {
background-image: url('/images/img-2.jpg');
background-position: center;
background-size: cover;
background-repeat: no-repeat;
color: #fff;
font-size: 100px;
}
.products {
background-image: url('/images/img-1.jpg');
background-position: center;
background-size: fill;
background-repeat: no-repeat;
color: #fff;
font-size: 100px;
}
.sign-up {
background-image: url('/images/img-8.jpg');
background-position: center;
background-size: cover;
background-repeat: no-repeat;
color: #fff;
font-size: 100px;
}
The url should look like:
background-image: url('../public/images/img-2.jpg');
You need to get out of your src folder and get into your public folder and then look into the images there.
If the above approach doesn't work, it would be because of the following reason:
In React, it is sort of a compulsion to place the images inside the src folder. Otherwise they are not readily accessible from any code inside the components folder.
Try creating a new folder in your src directory and then shifting the images. Or else you can directly take the whole images folder and cut-paste inside your src folder.
Hey did you try giving the path from the public folder. As per your folder structure your images folder reside in public folder. Can you try giving the path like 'public/images/img-1.jpg'
background-image: url(`${process.env.PUBLIC_URL}/images/image1.jpg`);
I'm using Bootstrap with Rails and can't get the brackground color and image to show up together. I have a custom CSS stylesheet where I'm trying to edit the body to have a dark background with a small image in the bottom right corner, like this:
body {
padding-top: 55px;
background-color: #2e2e2e;
background-attachment: fixed;
background-image: url('waves.png');
background-repeat: no-repeat;
background-position: right bottom;
}
Problem is that the image doesn't show up, just the background. If I remove the 'background-color' it shows up and looks perfect, but I can't get them together. I know I'm missing something small (probably stupid too). Appreciate the help.
Have you tried this way?
body {
padding-top: 55px;
background: #2e2e2e url(waves.png) right bottom no-repeat;
background-attachment: fixed;
}
make sure the file extension is .css.erb
body {
padding-top: 55px;
background: #2e2e2e url('<%= asset_path('waves.png') %>') fixed no-repeat right bottom;
}
Not sure about the environment you're in, but have you tried !important ? It adds priority in case there are styles with different values applied somewhere later in code.
body {
...
background-color: #2e2e2e !important;
background-image: url('waves.png') !important;
...
}
Try to put the waves.png file in /assets/images and replace url('waves.png') with this:
background-image: image-url('waves.png');
I'm assuming you're using assets pipeline and your CSS file is preprocessed by Sass (the stylesheet filename ends with .css.scss), for more information I suggest you to read the Asset Pipeline Rails Guide.