CODEWITHSUNDEEP
phphtmlcsslaravel-5.4
Jesse
Jesse

Reputation: 403

Laravel CSS background-image for hero

I've been attempting to create a hero header in my Laravel 5.4 project. However, one certain thing doesn't seem to be working the way it's supposed to.

(If you're not familiar with what a hero header is; it's basically an image stretching over the entire screen used as a background upon first loading the website, usually with some text and a call to action on top of it.)

This is the way I've structured my code, based on research I've been doing:

home.blade.php:

@extends('layouts.app')

@section('content')
<div class="container">

    @include('partials.hero')


</div>
@endsection

hero.blade.php:

<div class="hero-image">
<div class="hero-text">
    <h1>Hero header</h1>
    <p>Hero text</p>
    <button id="hero-prim" class="button-primary">Action!</button>
    <button id="hero-sec" class="button-secondary">Info</button>
</div>

and finally the css:

.hero-image{
background-image: url(/images/hero-image.png);
width: 100%;
height: 50%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}

.hero-text{
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
}

The strange thing about this is that the text and the buttons are loaded with the page, but there's no sign of the image. Even if I exclude any other elements and try to only show the image, it gives me nothing. This makes me think the issue must be in how I'm setting the background-image in my CSS, but I've no idea how I'd have to do it differently.

Any help or advice is greatly appreciated!

EDIT: The image now displays properly, but doesn't stretch across the entire width of the screen, instead I think it only stretches across the section.

In any case, I'm not sure exactly which change in code made this happen, but after trying out some Bootstrap classes on it and defining the height of html and body as 100% (courtesy of VegaPunk), things have been better.

I'm sorry I can't define a more clear answer, but it's still a mystery to me, since yesterday none of these solutions seemed to work on their own.

Upvotes: 0

Views: 2122

Answers (4)

Ziaur Rahman
Ziaur Rahman

Reputation: 1188

I face the same problem and solved it just now. My css code was background: url(images/banner.jpg); and the error was Failed to load resource: the server responded with a status of 404 (Not Found). The solution is adding two dot '.' and a single slash '/' before images background: url(../images/banner.jpg);, Now the image has been appeared. My images and css folder in my project public folder and banner.jpg is in the images folder. enter image description here

Upvotes: 1

Vegapunk
Vegapunk

Reputation: 99

It doesnt know 50% of what, you need to declare 

html, body { height: 100%;}

Upvotes: 0

jotaelesalinas
jotaelesalinas

Reputation: 1497

Heights are really tricky in CSS. I suggest you use a framework like Bootstrap or Foundation.

Upvotes: 0

Win
Win

Reputation: 5584

Your image should be located in your public folder. So create a folder in public called 'Images' with a capital I and place the hero-image.png inside the created folder.

Upvotes: 0

Related Questions