Laravel CSS background-image for hero

Question

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.

Ziaur Rahman · Accepted Answer · 2018-03-07 08:09:09Z

1

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.

answered Mar 7, 2018 at 8:09

Ziaur Rahman

1,18811 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Nico Haase Over a year ago

How does this relate to the original question? The OP uses an absolute url (like /images/banner.jpg) which is a much better solution because it is independent from your routes

William Turrell Over a year ago

Note this also works if you're using Laravel Vite, url(../images/foo.png) maps to /resources/images/foo.png. Absolute URLs aren't processed by Vite, so you'd have to manually place the image under the /public folder.

Win · Accepted Answer · 2017-07-30 20:59:22Z

0

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.

answered Jul 30, 2017 at 20:59

Win

5,5942 gold badges18 silver badges21 bronze badges

1 Comment

Jesse Over a year ago

that's what I've done, and I can get the other images in that folder for my footer and header succesfully in the html code with <img id="footer-logo" src="{{ URL::asset('images/logo.png') }}">. And even if I use HTML to try and set the style in the div tag like so: <div class="hero-image" style="background-image: {{ URL::asset('images/hero-image.png') }}"> it doesn't seem to display the image properly, only when I use the img tag

jotaelesalinas · Accepted Answer · 2017-07-30 20:59:56Z

0

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

answered Jul 30, 2017 at 20:59

jotaelesalinas

1,5071 gold badge12 silver badges24 bronze badges

1 Comment

Jesse Over a year ago

thanks for the suggestion, i've been looking into everything it offers and Bootstrap does seem really useful, it's just a matter of figuring out a few specifics now... Adding the jumbotron class at least makes the image visible, but it's position weirdly and smaller than I expected, not stretching over the whole screen. But I imagine I'll figure it out eventually, thanks again :)

Vegapunk · Accepted Answer · 2017-07-30 21:15:58Z

0

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

html, body { height: 100%;}

answered Jul 30, 2017 at 21:15

Vegapunk

998 bronze badges

3 Comments

Jesse Over a year ago

didn't seem to work :( but thanks for the answer anyway!

Vegapunk Over a year ago

It did the trick for me when i tested your code in jsfiddle, your hero-image div is closed, right?

Jesse Over a year ago

I've managed to fix it a little more; the image now displays properly and the text centers right, but now it only stretches across the width of the <main> tag, while I'm looking for it to stretch across the entire screen. I'll update my question with some clearer info, because I don't know how else to do this. Many thanks though!

Collectives™ on Stack Overflow

Laravel CSS background-image for hero

4 Answers 4

2 Comments

1 Comment

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

1 Comment

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related