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
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'm building a simple landing page, the image file is found in the same folder with the html and css files. After applying the
the image failed to display. The image file shows up in the debuging tool
body { background-image: url ("../Landing page/3.jpg") ect...}
body { background-image: url ("..Landing page/3.jpg") ect...}
body { background: url ("../Landing page/3.jpg") ect...}
body { background: url ("../Landing page/3.jpg") ect...}
body { background-image: url ("..3.jpg") ect...}
body { background-image: url ("../3.jpg") ect...}
body { background: url ("3.jpg") ect...}
body { background: url ("../3.jpg") ect...}
I've changed the names of the files, documents as well. At this point I have no idea what else I could have missed
body {
width: 100%;
height: auto;
background: URL (" 3.jpg ");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
display: table;
}
The answer above (provided by Muhibbullah Ansary) works fine, however, consider adding a container and putting a class or ID on it instead of using the BODY tag.
As others have mentioned, double check your URL.
It would also help us if you stated what your desired outcome is so that we don't have to guess, based on the code you've provided. it's possible that even though the code gets corrected, it still doesn't accomplish what you really wanted. Just a thought.
It would be:
background-image: url('/your/path');
1) Check for errors and failed requests.
2) Might be the extension of the image is not jpg but jpeg. Check for the extension.
3) Check the correct path of the images.
4) Both are correct background-image: url('imgPath'); or background: url('imgPath');
Thanks
body{
background: url('https://images.pexels.com/photos/949587/pexels-photo-949587.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500');
width: 100%;
height: auto;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
display: table;
}
Your image path is incorrect, correct this path.
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 created a page on GitHub, however the background I coded through CSS will not appear on my page. The CSS code is shown below.
header {
background-image: url("resources/img/antelope.JPG");
background-size: cover;
background-position: center;
height: 100vh;
}
My github repo is: https://github.com/person/person.github.io
The CSS file is stored here:
https://github.com/person/person.github.io/blob/master/resources/css/style.css
Any help to why my background will not appear will be greatly appreciated.
Your image is not inside the resources folder.... it is at the same level as the index.html page - your URL should be url("antelope.JPG");
UPDATE
Looking at your changes, the URL should be as below now:
If you do not do anything, the URL should be: resources/img/antelope.jpg
if you package resources into the root folder then: ./img/antelope.jpg
but, the final URL will depend on how you build your page and beware that the server might be case-sensitive.
Make sure you indicate the correct filename (including case-sensitive extension)
Something along the lines of
header {
background-image: url(./img/antelope.jpg); /* may need to be adjusted depending on how you build your page */
background-size: cover;
background-position: center;
height: 100vh;
}
<header>
<nav>
Some navigation here
</nav>
</header>
To use one from the root directory (https://github.com/anhthyngo/anhthyngo.github.io) use next CSS:
header {
background-image: url('../../antelope.JPG');
background-size: cover;
background-position: center;
height: 100vh;
}
to use from img directory use next CSS:
header {
background-image: url(../img/antelope.jpg);
background-size: cover;
background-position: center;
height: 100vh;
}
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.