Visual code live server extension presents my page perfect but if I open index.html manually it has lot of problems that are not shown on live server.
I searched Google but didn't find anything.
Here are the files.
This worked for me :
Moved both of the images to css folder
In the style.css file : change the paths of the images for both of their selectors:
like this:
#showcase{
background-image: url('./showcase.jpg') ;
background-repeat: no-repeat;
background-position: center center;
height: 600px;
}
.imginfo{
float: left;
min-height: 100%;
width: 50%;
background: url(./photo-1.jpg);
Related
I'm working on react and I want to use a local image in a public folder as a background with Transparent color as div container.
the problem is this image not showing at all
my method work with a different image from the internet (that start with https)
I also tried to put it in CSS but still the same thing
this is code of background from local image (not visible )
background-image: url("/public/images/background.jpg");
also, tried this
background: #eaeaea urlurl("/public/images/background.jpg");
this is the code of background from the internet (visible )
background: #eaeaea url("https://mdbootstrap.com/img/Photos/Horizontal/Nature/full page/img(20).jpg");
**I think my problem with this methude url('/path/path/img.jpe) it shuld be **
// Import Bootstrap and its default variables
#import '~bootstrap/scss/bootstrap.scss';
.btn{
color: red;
}
.background {
background: #eaeaea url("/public/images/background.jpg");
background-size: cover;
background-position: 50% 50%;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
}```
Please try like this :
background: url('/./images/background.jpg');
Maybe it will work correctly.
What you need is to create an .env file in your project
Directory and Insert this code: SASS_PATH=node_modules:src then copy all the images
you want to use in src folder.
background-image: url("/background.jpg");
I believe you just need to add image to your background tag i.e:
background-image: url("/public/images/background.jpg");
I am having this weird problem. I tried searching on google for answers no one has ever asked such a question. The problem is that i make change to a css file named style.css and i go to browser to the localhost wamp link and refresh but the changes doesn't show. But when i upload the file to live server and refresh the live website i get that change and after i go to localhost website and refresh and the change happens. I tried clearing the cache but nothing changed.
Before that i came home today and i downloaded style.css from live server to my localhost, after that this problem started to happen. I am not sure though there is a relation between this event and why my file doesnt render on localhost wamp server.
I need your help please.
my css file style.css:
.profile_more_arrow {
position: relative;
float: left;
width: 100%;
height: 40px;
padding-top: 0px;
padding-bottom: 10px;
border-bottom: solid 1px #d2cece;
background: url(../images/profileDownArrow.png) no-repeat;
background-repeat: no-repeat;
background-size: 5% 20px;
background-position: 50% 10px;
}
I have an image called item8 that is being rendered on my webpage the css looks like this. This is in a css.sass file
.body-detail-intro {
background: url(/assets/item8-45411322696feaa47a0345b3e4bdd5de1b2cff8243c534b84a83a8d4d732ec0d.png) no-repeat;
background-size: cover;
background-position: center;
height: 55vh;
position: center;
color: white;
}
I am not sure where there hash on the image path came from as the image is just named item-8. When I remove the hash and just use item-8 the picture still loads.
Now enter this image Suitsandtables_HowitWorks.png
the code below doesn't work with Suitsandtables_HowitWorks.png I also tried it with another image I have already on my site called team-1 which still didn't work
.middle .right{
background: image-url("/assets/team-1.jpg") no-repeat;
background-size: cover;
background-position: center;
height: 600px;
width: 300px;
}
Ive tried background, background-image, url, image-url nothing is working. Might be a css issue which I am currently checking as in wrong classes called for the css to hook to but I don't think so.
I am using css.sass
That hash come from rake assets:precompile, which is run by default in production so your server or the CDN you're using are able to cache it.
Sprockets will handle that hash for you under the covers.
My file extension is only .scss, but that shouldn't matter.
.your-class {
// Note i'm using only the image name. No path
background-image: image-url('my_image.jpg');
}
I just extracted this example from a working project, so it should work just fine.
I have a landing page with a background image that is showing on locally, but when I push it out live I am unable to see it on the internet.
My file structure is very simple, I have a root folder called runn, and in that folder I have a css folder, an image folder, and etc.
Below is the css for my background image.
body {
color: white;
background: #ee6184;
background-image: url('../images/image_01.jpg');
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
font-family: 'Lato', sans-serif;
font-weight: 300;
font-size: 180%;
margin: 0;
padding: 0;
width: 100%;
text-align: center;
}
Look at the browser console (or network), maybe it shows you 404 error for this image. That means your path does not work for the server, and also it can be 403 (forbidden) or other errors.
Also, you can set path as /images/image_01.jpg if the root is not in subfolder like this: domain.com/runn/.
In other ways please put the link, so I can understand the issue.
usually when debuging an image isn't showing as expected, go chrome console see if there is 404 saying resource can't be found.
background-image: url('../images/image_01.jpg');
that means there is no such file exist in the path u've written in your html.
then re-configure the image path or upload the resouces to the correct path.
u can either use relative path in css as you've done in this case
background-image: url('../images/image_01.jpg');
or you can use absolute path in a sever language file such as in php
background-image: url('<?php echo site_url();?>/images/image_01.jpg');
I have rails 3.2.9 and I want to put a background image. my image is found in the folder: public/images and I put it also in the folder: assets/images.
ul {
height: 200px;
width: 350px;
border: solid 1px blue;
margin: 0 auto;
padding: 0px;
background-image: url('/images/todo.png');
}
but there is no backgound image.
please help.
I have to put:
background-position: center;
so my code is:
background: url(/assets/rsz_todo.png) no-repeat;
background-position: center;
and my image is found in assets/images
A simple way to check (before you edit your css) is to enter the path in the browser. This way your are sure what the path should be.
Your app/assets/images folder maps to:
http://domain/assets/
So if you have a app/assets/images/logo.png you should be able to retrieve that in your browser like:
http://domain/assets/logo.png
Then, in your CSS you should be able to refer to your logo.png like:
// app/stylesheets/application.css
body {
background: url(/assets/logo.png) no-repeat;
}
Also have a look at the Rails asset Pipeline:
http://guides.rubyonrails.org/asset_pipeline.html
In case this helps anyone finding this...Rails provides helper methods for referencing an asset in your CSS or SASS file:
background-image: image-url("rails.png")
Turns into...
background-image: url(/assets/rails.png);
Why don't you try just :
background: url(image.png)
The asset-pipeline is made up for simplicity.
If you put your image in assets/images then when calling that image you should use
background-image:url("/assets/image.png");
or you could try
background:url("/assets/image.png");
And sometimes i have found using background rather than background image works better, but that is just personal experience