Menu icon Foundation
Hero Image using local images

Hey guys,

I just started designing my webpage for the first time, so I'm a complete noob.

I wanted to add this one to my page: http://zurb.com/building-blocks/hero-image-with-text-and-image.
So far so good, it got it working.
Now I want to replace the images with local files but I can't get it working with those.
I don't know how to adjust the css file properly, can someone help me out?

Thanks in advance.

Jesse

.hero {
    background: url("http://wallpoper.com/images/00/34/39/15/circuit-pcb_00343915.jpg") no-repeat center center;
    background-size: cover;
    height: 100vh; }
.hero:before {
    content: '';
    position: absolute;
    top: 45px;
    right: 0;
    bottom: -45px;
    left: 0;
    background-image: linear-gradient(to bottom right, #002f4b, #dc4225);
    opacity: .8; }
.hero .intro {
    padding: 3rem;
    position: relative;
    top: 50%;
    transform: translateY(-50%); }
.hero h1 {
    color: #fff;
    font-size: 1.5rem;
    line-height: 1.5em;
    letter-spacing: -0.025em;
    font-weight: 300;
    text-align: center; }
.hero p {
    color: #fff;
    line-height: 1.75em;
    font-weight: 200;
    text-align: center;
    margin-bottom: 2rem; }
.hero .tech-img {
    background-image: src:("img/Nautonomous.png") no-repeat center center>;
    background-size: cover;
    height: 9rem;
    width: 9rem;
    border-radius: 50%;
    display: block;
    margin: 0 auto; }
@media only screen and (min-width: 40.063em) {
    .hero .tech-img {
        height: 18rem;
        width: 18rem; }
    .hero h1 {
        padding-top: 4.5rem;
        text-align: right;
        font-size: 2.5rem; }
    .hero p {
        text-align: right; } }

heroimagelocal

Hey guys,

I just started designing my webpage for the first time, so I'm a complete noob.

I wanted to add this one to my page: http://zurb.com/building-blocks/hero-image-with-text-and-image.
So far so good, it got it working.
Now I want to replace the images with local files but I can't get it working with those.
I don't know how to adjust the css file properly, can someone help me out?

Thanks in advance.

Jesse

.hero {
    background: url("http://wallpoper.com/images/00/34/39/15/circuit-pcb_00343915.jpg") no-repeat center center;
    background-size: cover;
    height: 100vh; }
.hero:before {
    content: '';
    position: absolute;
    top: 45px;
    right: 0;
    bottom: -45px;
    left: 0;
    background-image: linear-gradient(to bottom right, #002f4b, #dc4225);
    opacity: .8; }
.hero .intro {
    padding: 3rem;
    position: relative;
    top: 50%;
    transform: translateY(-50%); }
.hero h1 {
    color: #fff;
    font-size: 1.5rem;
    line-height: 1.5em;
    letter-spacing: -0.025em;
    font-weight: 300;
    text-align: center; }
.hero p {
    color: #fff;
    line-height: 1.75em;
    font-weight: 200;
    text-align: center;
    margin-bottom: 2rem; }
.hero .tech-img {
    background-image: src:("img/Nautonomous.png") no-repeat center center>;
    background-size: cover;
    height: 9rem;
    width: 9rem;
    border-radius: 50%;
    display: block;
    margin: 0 auto; }
@media only screen and (min-width: 40.063em) {
    .hero .tech-img {
        height: 18rem;
        width: 18rem; }
    .hero h1 {
        padding-top: 4.5rem;
        text-align: right;
        font-size: 2.5rem; }
    .hero p {
        text-align: right; } }
Rafi Benkual about 4 years ago

You can set the path to your image file

background: url(../img/marquee-stars.svg);

Jesse B about 4 years ago

Thanks a lot!

I tried that before, but without the dots in the path.
But why do you have to use them?
I thought that you use them to get to the overlying folder.

Jesse B about 4 years ago

Ohh I think I get it.
Since I'm programming in the css folder and not in the folder where the index is.

jstubbs about 4 years ago

Hi Jesse B, quite a nice writeup on relative and absolute paths here:
http://www.coffeecup.com/help/articles/absolute-vs-relative-pathslinks/

James Stone about 4 years ago

Just to followup, the reason you have the ../ preceding the images directory is because typically, your CSS stylesheets are stored in a directory ~/css or ~/stylesheets or something like that. Your images live on that same directory, in general, ~/images. So you have to use ../ do descend one directory to be able select the images. You have to think about where are the images being loaded, from the point of view of the CSS files.