I have just overridden the bootstrap here and I made sure it's pulling from my local css, any other changes to it do work, but when I try to insert a background-image only localhost url for image works, if I specify local path it doesn't. I tried all variations, also static with background-image: url("{% static 'portfolio/waterfall.jpg' %}");
I'm using Django and had a problem earlier with my settings.py -can that be causing it?? Thanks
#settings.py
STATIC_URL = '/static/'
MEDIA_ROOT = BASE_DIR / 'media'
MEDIA_URL = '/media/'
#this is the jumbotron Im trying to get the background for
<section class="jumbotron text-center">
<div class="container">
<h1>Album example</h1>
<p class="lead text-muted">Something short and leading about the collection below—its contents, the
creator, etc. Make it short and sweet, but not too short so folks don’t simply skip over it entirely.
</p>
<p>
Main call to action
Secondary action
</p>
</div>
</section>
#and the custom .css
.jumbotron {
padding: 2rem 1rem;
margin-bottom: 2rem;
background-color: #c5b8b8;
border-radius: .3rem;
background-image:
url("media/portfolio/images/foster-s-home-for-imaginary-friends-fosters-home-for-imaginary-friends-_ER46ne1.jpg");
background-repeat: no-repeat;
background-position: bottom center;
background-size: cover;
}
Wrong picture address, correct is https://commons.wikimedia.org/wiki/File:Image_created_with_a_mobile_phone.png
Read about the license and available sizes and formats, then download and save on your server the appropriate version of the file for your site. Using direct link to particular version is possible, but it's rude to abuse wiki transfer.
edit
Did you insert a custom css after bootstrap in meta declarations?
If the url and order are not to blame then bad news - the problem is bigger and bootstrap-dependent.
Well, use https://validator.w3.org/unicorn/ and development tools in your browser to find out what is to blame
Related
I would like to set a background image to a div using CSS.
While I can display the image while using HTML <img src="/static/img/fon1.jpg">...
I get a 404 (Not Found) when I try to set the image through CSS:
style="background-image: url(/static/img/fon1.jpg)"\
I have tried different paths like: ../img/fon1.jpg and many others. Also with and withoud quotes.
I am certain that the css and the html are linked correctly as I can set the background to a solid color.
If I use in html, the css elements find and display the picture as well.
I feel like I should resort to just using <img> and rescaling it to fit the window, but I'd like to know what's wrong with the sucker.
Any kind of help / materials / links / jokes are welcome. Thank you if you take your time. All the best!
Folder structure:
project
└─static
└─ img
| fon1.jpg
└─ stylesheet
| styles.css
└─ base.html
HTML
<link rel="stylesheet" type="text/css" href="/static/stylesheet/styles.css">
...
<body>
<div class="background1"></div>
<div class="background2" style="background-image: url('/static/img/fon1.jpg')"></div>
</body>
...
CSS
.background1 {
background-image: url(../img/fon1.jpg);
height: 960px;
width: 1280px;
}
.background2 {
background: red;
height: 960px;
width: 1280px;
}
You missed the quotes in your code.
.background1 {
background-image: url('../img/fon1.jpg');
height: 960px;
width: 1280px;
}
I believe the proble lies in JetBrains Webstorm application. I tried the same configur on another application where I was hosting the server, and then the images were found. Currently I was using Webstorms feature to open local HTML file in browser. Seems that it doesnt support GET requests from .css file.
Update:
When referencing static files in Webstorm Live Edit the path should include the project folder. In my case the img would be located at: http://localhost:63342/projectname/static/img/fon1.jpg
I don't know from which file you are trying to access the image. I am assuming, You are trying from base.html
you are able to add the image like this.
<img src="./img/fon1.jpg">
I'm new to both HTML and CCS (I've just started yesterday night) and have hit a snag. I'm having some trouble with using the id selector in the div; the background image is failing to appear. Please note that external ccs was used and the image in question exists in a separate folder. Also, the code seen below was made using notepad on my Microsoft computer.
Here's what I've got so far:
#banner {
background-image: url("../img/Sunflower.jpg");
background-repeat: no repeat;
background-size: cover;
}
<link rel="stylesheet" href="css/style.css">
<div id = "banner">
Google Search
<br>
YouTube
<h1>First Web Page</h1>
</div>
There are several things that can go wrong:
In your CSS, you used a relative URL. Usually, Images are transfered over the web via HTTP, so usually, we put relative paths only when we use a bundler for JavaScript/Css. I recommend you change your image path to /img/Sunflower.jpg This will make your web-browser request it at <server_root>/img/Sunflower.jpg
Maybe you didn't include the actual CSS path in the HTML file to make the browser actually fetch it. Please check the <link> tag
The code you've written is generally okay, so the problem is with your actual filesystem / understanding of server paths, so I recommend checking those out.
Here's a working example for you:
#banner {
background-image: url("http://via.placeholder.com/300");
background-repeat: no-repeat;
background-size: cover;
}
<div id="banner">
Google Search
<br>
YouTube
<h1>First Web Page</h1>
</div>
Your code is correct and should work. Please consider the following.
1: Make sure you have the correct path of the image. Your path looks good from here, however, it is still hard to say because we don't know where you have saved the image.
2: Check and be sure that you have linked your CSS to your Html file if using the external CSS, or they are correctly placed in style tag if using internal CSS.
Thank you.
are you using inline css or external css file, or make a separate folder to your media and use that objects by giving simple names like img1.png like that
no-repeat instead of no repeat
please remowe spaces around equation marks - I've never seen anybody formatting the code like that
path to the image is most likely incorrect. Bear in mind ../ means one folder up relative to the css file
did you include your css file in HTML file?
Try add this line on header of HTML file:
<link rel="stylesheet" href="styles.css" />
where "styles.css" is the name of your css file. Check if the css file is in the same folder too.
I am trying to load a local image as background image in CSS. My folder structure as below,
MyApp
Public
index.html
html
template.html
images
myimage.png
javascripts
stylesheet
Loading index.html from public folder and on click, loading template.html from html folder. In template.html i have defined the css like this,
textarea{
<!-- background-image: url(http://i.imgur.com/2cOaJ.png); -->
background-image: url('../images/myimage.png');
background-attachment: local;
background-repeat: no-repeat;
padding-left: 35px;
padding-top: 10px;
border-color:white;
background-color: white;
height:90%;
width:95%;
resize: none;
outline-width: 0;
}
And calling this in template.html as ,
<div id="bodydata" class="tabcontent" >
<textarea rows="5" ng-model="description"></textarea>
</div>
It works beautifully when I take an image from web "background-image: URL(http://i.imgur.com/2cOaJ.png);" but does not work when I change to the local image which is nothing but the same image downloaded and saved as the local copy.
background-image: url('../images/myimage.png');
I want to have it as local because the server may not have the internet connection. So how to refer the image in right way. I have tried many things like single quotes, double quotes, without quotes but it didn't work. Please suggest.
Thanks in advance.
How is your web-server setup? Where is your web-server running from?
Depending on these answers, you should be able to achieve the desired result by adjusting your CSS like this:
background-image: url('/images/myimage.png');
So for instance, if your web-server is running in /MyApp, and is configured to allow static files to be fetched (eg files matching this pattern /images/*.png), then the answer above should work.
I am trying to add an image as a sign in button to my website's header. When a user clicks/taps the button, it redirects them to the sign in page. I'm creating a ruby on rails app, and my image is located in "app/assets/images", but I can't seem to get my image to appear.
And I do not want to upload the image to a site such as imgur and link it to my site.
Here is what I've tried so far.
Attempting to link with CSS:
1) background-image: url(../images/sign-in.png) no-repeat;
2) background: url(sigin-in.png);
And I've tried getting it to work with display: block; width:128px; height:128px; position: relative;
Attempting to link with HTML:
<a type="button" class="navbar-toggle btn-signin">
<img class="signin-img" scr="../images/sign-in.png">
</a>
Note: I've tried other methods in HTML too, such as creating <button> tags,<div> tags and<a> tags.
It's a ".png" image, does that play a factor for not appearing?
Try changing the src value of your image to ../../assets/images/sign-in.png.
Your full image element should look like this:
<img class="signin-img" src="../../assets/images/sign-in.png">
Here you are mixing backgound-image and background-repeat:
background-image: url(../images/sign-in.png) no-repeat;
this should be:
background: url(../images/sign-in.png) no-repeat;
Also, in some RoR apps, using MVC pattern, the assets are being referenced from the root level of the app, so you might have to change the paths to the files.
probably you could try removing the "../"?
do you have any other images that are being correctly displayed?
good luck!
I solved the issue! I figured it had something to do with rails, since this only happens when I make rails apps/sites.
Since my html file is erb (embedded ruby), I had to "embed" the image in my html like this:
<img src="<%= asset_path( 'sign-in.png' ) %>" />
Thank you to everyone who answered!
First, make sure it's src not scr.
<img class="signin-img" scr="../images/sign-in.png"> # bad
<img class="signin-img" src="../images/sign-in.png"> # good
Second, open up developer tools (https://developer.chrome.com/devtools) and see if the browser is requesting the image:
images/sign-in.png
It will look like this: (make sure you're in the network tab)
I have domain 'A' with no hosting. I have domain 'B' with hosting.
I want domain 'A' to simply have a background image which it is referencing from domain 'B' hosting.
I have set up a directory in domain 'B' called 'bl' Within this folder I have placed a .jpg of the background image, 'bg.jpg' and also a style.css with the css3 code for having the background image full screen.
How do I point domain 'A' to this particular folder. Are there other elements besides the style.css and .jpg that I need?
If it helps, the only thing in the style.css file is:
html {
background: url(http://mywebsite.com/bl/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Thank you kindly for your assistance.
In this case, you will need to provide absolute path for your image with domain B. This way, you can call it on domain A.
<!DOCTYPE html>
<html>
<head>
<title>Testing - Stackoverflow</title>
<style type="text/css">
html {
background-image: url('http://blogsbits.com/wp-content/uploads/2013/01/Spring-Wallpaper.jpg');
background-repeat: no-repeat;
background-position: center;
}
.content {
margin: 0 auto;
width: 60%;
margin-top: 100px;
}
</style>
</head>
<body>
<div class="content">
<h1>Hi! Is This Usefull</h1>
<p>You can use any image that in the world wide web site. I just do it for give you more example. Just copy this code and create a new html page in your localhost. I got that image from google search. You need to get the image full path.</p>
<p><strong>Example : </strong></p>
<p>http://blogsbits.com/wp-content/uploads/2013/01/Spring-Wallpaper.jpg</p>
<p>This is the url that wich I viewed from google search engine. Click on it to view the image. Do the CSS styles also what type of you like</p>
<p>Hope you can understand this.</p>
<small>Wish you good luck on programming</small>
<p><small>Yeshan Sachitha K Perera # ITSthe1</small></p>
</div>
</body>
</html>
Create new html document in your localhost with this source code and run it. I hope you can understand this.
Forget about the existence of Domain B. It is irrelevant.
You need to:
Configure the DNS for Domain A to point at the IP address of the server which is running the webserver
Create (in the web server configuration) a new Virtual Name Host (that's the Apache documentation, if you don't use Apache you'll need to find the appropriate docs for your server) with a DocumentRoot pointing to that directory (on the file system. the existence of B is still irrelevent!)
Add an index.html file (you have to have a webpage for the background image to appear on).