I am trying to place a menu icon on my webpage. On my CSS document I use the following code:
.nav-menu-btn{
background: url(../images/menu-btn.png)no-repeat;
filter: var(--color-filter);
background-size: 30px;
background-position: center;
width: 40px;
height: 40px;
cursor: pointer;
display: block;
}
I have my css document in a different folder within my project folder, as well as a seperate folder for my images. Any ideas?
I have tried moving the image to my main project file, and every combination of quotes "", and single quotes '' that i can think of. I have also tried using background-image: url(); instead, but nothing has produced any different results
I believe if I'm seeing this right you are missing double quotation marks inside your url. Try below if that works and let me know. If this doesnt works maybe you are using a wrong path Try to use your website path and see if that works. Please provide your folders on your server how it looks like so everyone can see.
.nav-menu-btn{
background: url("https://yourwebsite.com/images/menu-btn.png")no-repeat;
filter: var(--color-filter);
background-size: 30px;
background-position: center;
width: 40px;
height: 40px;
cursor: pointer;
display: block;
}
Related
.payble25 {
background-position: -57px -27px;
background-size: 35em;
}
.spt25 {
background-image: url(images.svg);
width: 25px;
height: 25px;
position: relative;
padding: 0;
display: block;
background-size: 30em;
font-size: 12px!important;
}
I am facing issue on chrome updated version(78.0) loading image multiple time from memory cache.
I have using css, html and sprite image in my application. This loading single image in Network tab using chrome browser.
I tried and apply image path like url(images?ver=1.0.svg), url(images?cache=none.svg); and url(images?1.0.svg);. but it is not resolved.
<span class="payble25 spt25"></span>
Network tab image
You could encode the svg into base64 (there are a lot of free online services that'll do this for you) then use a data URI in your CSS background property.
background: url(data:image/gif;base64,<YourImageData>);
But there's really no performance penalty from loading it from memory, is there?
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
My blog hosted at blogger http://development-platform.blogspot.sg is loading with header-wrapper image "back.jpg" but when I click on the blog post my header-wrapper image "back.jpg" is not loading.
Thanks in advance.
Chrome debugger show the "background: url" line is strikeout on the blog post attached the image of the Chrome debugger Chrome debugger screenshot
#header-wrapper {
text-align: center;
padding: 0;
background: url(https://2.bp.blogspot.com/-0lbeIzTG3Nc/WT7DAREUYxI/AAAAAAAAC54/4sv9zQWVr0E_Lh50GWoVK2gWMBYwAYIfwCLcB/s1600/back.jpg) no-repeat center bottom;
background-attachment: fixed;
background-size: cover;
margin-bottom: 10px;
height: 100vh;
box-sizing: border-box;
position: relative;
width: 100%;
}
This is a specificity issue. The background: #fff in .item #head-wrapper is more specific than the background set in #head-wrapper.
Yes you could use !important to work around it, but I would suggest refactoring the existing css to be more correct.
Go back into the chrome dev tool and uncheck the background: #fff to see the result.
I have the image in the correct folder but I want to add a text box on top of an image and I was told the best way to do it is make the image a background image, but when I followed a tutorial it never appeared?
anyway here is my html
<div class="module">
<h2>blah blah</h2>
</div>
and my CSS
.module {
margin: 10px;
width: 1530px;
height: 717px;
display:block;
background: url('C:\Users\Jason\Desktop\champions\images\shop.png');
background-size: cover;
position: relative;
}
h2 {
position: absolute;
bottom: 100px;
left: 100px;
background: rgba(0, 0, 0, 0.75);
padding: 4px 8px;
color: white;
margin: 0;
font: 14px PTSans;
}
the image is full width of the screen so I am using container-fluid in bootstrap and the text box will be in the middle of the image.
You may call the local file as background like this:
background: url("file://PATH-TO/file.jpg");
Keep in mind that the string inside parentheses should provide a URL to the file.
Also, you have the option to put a path in it.
background: url("PATH-TO/file.jpg");
Change the backlashes. From this...
background: url('C:\Users\Jason\Desktop\champions\images\shop.png');
To this
background: url('C:/Users/Jason/Desktop/champions/images/shop.png');
Cheers.
It looks fine of your css. Try to use firefox or chrome debugger to check if the background image can be loaded or not. Try to change the value of the background-size. Sometimes the background image is too large that you can only see part of it (which may be completely white) on the screen.
Your path is wrong
try this: url('images/shop.png') - if your css is in champions
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.