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
Related
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 created my portfolio on Gitlab Pages. My style.CSS work partially. background-image: url(..) doesn't display in navigator. However, everything else seems to be working.
My content is in public/img/.png
I tried :
url(/img/.png);
url(public/img/.png);
url(/public/img/.png);
You can check my code here : https://medjaherirany.gitlab.io/resume/
Edit: I went into your code on the inspector, use background-image: url("../img/portrait0.png"); and it works. I will include a screenshot. This is used to go backwards in the directory.
I hope this helps.
As I can see in your CSS file you have used
figure {
background: url(/img/portrait0.png);
background-repeat: no-repeat;
background-position: 80% 111px;
height: 727px;
background-size: 690px;
background-color: #f2f2f2;
}
Change it to
figure {
background: url("img/portrait0.png");
background-repeat: no-repeat;
background-position: 80% 111px;
height: 727px;
background-size: 690px;
background-color: #f2f2f2;
}
Here actually your CSS says to look for img directory in the parent directory of "https://medjaherirany.gitlab.io/"
But your code is in https://medjaherirany.gitlab.io/resume That's why the browser was searching for "https://medjaherirany.gitlab.io/img/portrait0.png"
But actually it is in "https://medjaherirany.gitlab.io/resume/img/portrait0.png"
Here I changed the URL of background image and I got the image working.
Hope this helped you. Feel free to ask any further doubts.
Happy Coding
<div class="tp-bgimg defaultimg " data-bgcolor="undefined" style="background-repeat: no-repeat;
background-image: url("https://ifycc.org/wp-content/plugins/revslider/admin/assets/images/transparent.png");
background-size: cover; background-position: center center; width: 100%; height: 100%;
opacity: 1; visibility: inherit; z-index: 20;" src="https://ifycc.org/wp-content/plugins/revslider/admin/assets/images/transparent.png">
</div>
I have this code added by the slider revolution. I know they used transparent.png as a background image but still, SEO analyzers are giving me the warning to add alt attributes to these images. I think it's because they've also added an src attribute. Can anyone please guide me to fix this problem.
You need to edit the slide and under main background source settings there is a Textbox to enter Alt texts.
Was facing the same problem. However, when I downloaded Rev Slider PNG image and uploaded it as normal bg (with repeat) it has solved the problem as I have given ALT in Media Library itself.
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.
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.