Hi I'm a new developer and I'm trying to build a portfolio site for myself. Anyway, I can't seem to get the background image I put together to show. The image is located in the images folder of my CSS folder. I notice if I try to put a background color in it works just fine. However, I don't want a background color just an image.
The file pathway in my project is as follows:
ProjectName > SiteRoot > CSS > images > hmebckgnd.jpg
This is my code for styles.css
body{
background-image: url('/images/hmebckgnd.jpg');
background-repeat: no-repeat;
margin: 0;
}
The first / in the path attempts to find the images folder from the root directory, removing it will load it relative to the directory the stylesheet is in (which should be the CSS folder):
body{
background-image: url('images/hmebckgnd.jpg');
background-repeat: no-repeat;
margin: 0;
}
If your image has path like this:
ProjectName > SiteRoot > CSS > images > hmebckgnd.jpg
why don't you include css directory in css file?
body{
background-image: url('../images/hmebckgnd.jpg');
background-repeat: no-repeat;
margin: 0;
}
It is good practice to use relative path in css file and load whole css file with forward slash in your HTML file.
Related
I'm trying to set a background image for a class.
This is my file structure using laravel-mix:
What's wrong with my code in app.scss file?
.header-bg {
background-image: url('img/illustration-main.jpg');
background-size: cover;
}
Tried this but also not working:
.header-bg {
background-image: url(require('img/illustration-main.jpg'));
background-size: cover;
}
Here in case the content of the img folder:
If your css file is being built to dist/app.css your image path should be relative to this. Since your img folder is sibling to dist, try url('../img/illustration-main.jpg')
I have an image in the assets/images and I want to set it as a background on the main page refers to a given class, but I do not see image in production Heroku
application.scss
.has-bg-img { background: url('img.PNG'); center center; background-size:cover; }
In my Rails app, I change the filename to end with .scss.erb and then have the following as an example. A comment at the top, followed by the example.
//= depend_on_asset "sprite-article-r4.svg"
.contents {
background-image:url('<%= asset_path("sprite-article-r5.svg") %>');
}
Reference this SO question
you must set a full path like url('localhost/apps/assets/images/myimg.jpg')
If your assets are not static and committed into your repo, and you're trying to reference a dynamically uploaded image, you might have to read on how to work around with Heroku's ephemeral filesystem
You can try image-url or asset-url helpers.
Asset Pipeline
Edit :
actually, i'm not sure about your syntax
.has-bg-img {
background-image: url('img.PNG');
background-position: center center;
background-size:cover;
}
it should work better.
In Rails, you have to prepend directory name to url. For your case change
.has-bg-img { background: url('img.PNG'); center center; background-size:cover; }
to
.has-bg-img { background: image-url('img.PNG'); center center; background-size:cover; }
This is because you are storing your image in images(assets/images) directory.
Try to the following
.has-bg-img {
background-image: asset-url('img.png');
background-size: cover;
}
This should work, I don't why you use center center; I think that is syntactically invalid see this Horizontal & Vertical Align
#hero {
background: url('/wp-content/themes/bootstrap2wordpress/assets/img/hero-bg.jpg') 50% 0 repeat
}
Here is my code but still doesn't work
Without more information (some HTML to go with it) or a webpage you are having trouble with, it is very hard to understand what you are trying to accomplish.
I would try something like this, as it sounds like you are trying to have the background image repeat.
hero {
background: url('/wp-content/themes/bootstrap2wordpress/assets/img/hero-bg.jpg') repeat;
}
https://www.w3schools.com/cssref/css3_pr_background.asp
Try this, But you need to add this to your header.php or any PHP file header section. This will not work in CSS file.For more details visit URL
<style>
.hero {
background-image: url("<?php echo content_url(); ?>/wp-content/themes/bootstrap2wordpress/assets/img/hero-bg.jpg") 50% 0 repeat;
}
</style>
Hope this will help you.
Just navigate up a directory or two using ../
hero {
background: url('../../img/hero-bg.jpg') repeat;
}
I am assuming hero is your class name thats why prefixed with .
In your code I could not find . , so check the same one more time.This also can be one issue if it is not there in your code.
Can you try this way:
.hero {
background: url('/wp-content/themes/bootstrap2wordpress/assets/img/hero-bg.jpg');
background-size: 50% 0;
background-repeat: repeat;
}
I have tried following both ways but always getting failed to load image. Tell me what's wrong in this code
header{
background-image: url("intro5.jpg");
background-image: url('intro5.jpg');
}
header{
background-image: url("correctpathtoimage/intro5.jpg");
background-image: url('correctpathtoimage/intro5.jpg');
}
whats the path/position of the images folder relative to the style sheet folder?
You have to give proper path of image as below,
header{
background-image: url("path_name/intro5.jpg");
background-image: url('path_name/intro5.jpg');
}
so let say that structure of your page looks like this
/images
intro5.jpg
someotherimage1.jpg
someotherimage2.jpg
etc...
/js
/css
style.css
index.html
your index.html file is in main folder. if you load styles from file in CSS folder then the path to your image should look like this:
background-image: url('../images/intro5.jpg');
if you load styles INLINE inside index.html then the path should be
background-image: url('images/intro5.jpg');
second of all it depends to what are you attaching the background-image ?
if it is an anchor <a> then you need to add display: block; below the background-image because some of the elements are inline and inline elements can't have a set width or height
I am having some trouble with a few things with the Laravel 4 Framework. First, to give the setup, I have an assets folder, within my public folder, that contains a folder for css called "CSS", a folder for images called "images", and a folder for fonts called "webfonts". Here are the paths:
/laravel-master/public/assets/CSS
/laravel-master/public/assets/images
/laravel-master/public/assets/webfonts
Inside the CSS folder is my main CSS file, style.css. I am trying to use an image as a background that I call within this CSS file. Here is the code:
.banner-image{
background: transparent url('../assets/images/8662834823_575a23516d_o.jpg') no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
height: 800px;
min-width: 1200px;
}
I have also tried:
.banner-image {
background: url('assets/images/8662834823_575a23516d_o.jpg');
}
and:
.banner-image {
background: url('/assets/images/8662834823_575a23516d_o.jpg');
}
Within my view, I call this CSS with the div:
<div class="banner-image"></div>
Both of these result in the page remaining blank. The image is not showing up, and I am not sure why.
On to the next one. Without using CSS, I am just trying to have a simple image show up. I have tried:
<img src="{{asset('assets/images/fanssignupsplash.png')}}">
and:
{{HTML::image('images/fanssignupsplash.png')}}
and:
{{HTML::image('assets/images/fanssignupsplash.png')}}
All of these result in the broken image symbol. The image is not showing up.
Finally, in CSS again, I am trying to use fonts files that I have put in the webfonts folder mentioned above. However, again the font is not working. I know the CSS file is being uploaded correctly to the page, because the color changes on the text, but the font is not being applied. Here is the CSS:
#font-face {
font-family:'proxima-nova';
src:url('/assets/webfonts/proximanova-bold-webfont.eot');
src:url('/assets/webfonts/proximanova-bold-webfont.eot?#iefix') format("embedded-opentype"),url('/assets/webfonts/proximanova-bold-webfont.woff') format("woff"),url('/assets/webfonts/proximanova-bold-webfont.ttf') format("truetype"),url('/assets/webfonts/proximanova-bold-webfont.svg#ProximaNovaBold') format("svg");
font-weight:bold;
font-style:normal
}
The view I am using is a blade file (landing.blade.php). This is all on localhost, using MAMP.
Thank you very much for your help with all of this. I am new to Laravel, and I have gotten all of this to work outside of a framework on a live site. Your help is very much appreciated.
I stopped on your first question, first tried solution.
Shouldn't it be this :
.banner-image{
background: transparent url('../images/8662834823_575a23516d_o.jpg') no-repeat center center;
...
}
See the removed "/assets"
Because if I got it well, your arborescence is like this:
assets
CSS
style.css
images
8662834823_575a23516d_o.jpg
For your second question, try to add a / at the beginning of your URL :
{{HTML::image('/assets/images/fanssignupsplash.png')}}
since I believe assets is at the root of your server.
add font face in a main.blade.php:
<style>
<?php $url = asset('plugins/font/Roboto-Regular.tff') ?>
#font-face {
font-family: Roboto;
src: {{$url}};
}
</style>
you can write also:
<style>
#font-face {
font-family: Roboto;
src: {{asset('plugins/font/Roboto-Regular.tff')}};
}
</style>
then in your scss or css use:
body{
font-family: Roboto;
}
https://laravel.com/docs/4.2/helpers#urls
then you don´t have problems when public your app