Solution 1 :

Ok, so weirdly for some reason the exact code I posted worked fine on Codepen, but wouldn’t work on my local machine.

However, I’ve somehow managed to get it to work by adding a .segment selector to my CSS (so I’m assuming it’s a styling thing with the segment causing the issue) so my CSS now looks like this:

.ui.masthead.segment {
    padding: 10%;
    background-image: url("../../assets/space.jpg") !important;
    background-repeat: no-repeat !important;
    background-size: cover;
    width: 100% !important;

which has it working properly.

Thanks to anyone who tried to help!

Problem :

I am trying to create a website with a hero image at the top of the page using a combination of React and Semantic UI (just what I learnt on the course I took).

This is the component:

import React from "react";
import "./App.css";

const App = () => {
    return (
        <div class='ui inverted vertical masthead center aligned segment'>
            <div class='ui text container'>
                <h1 class='ui inverted header'>My name</h1>
                <h2>My role</h2>
                <div class='ui huge primary button'>
                    Get Started <i class='right arrow icon'></i>

export default App;

And here is the CSS:

.ui.masthead {
    padding: 10%;
    background-image: url('../../assets/space.jpg') !important;
    background-repeat: no-repeat !important;
    background-size: cover;

This shows the following:
Small screen webpage

Which is fine but then when I expand the page I get the following:

large screen webpage with black bar on the side

How can I stop the black bar on the side? I would have thought the image would just resize to be larger to fit the page rather than show the black background colour.

I have tried to add width: 100% but get the same issue.


Comment posted by

Can you replicate that issue using this?

Comment posted by

Hi, I’ve tried to replicate the issue on here but can’t seem to get the background to even show up 🙁

Comment posted by…

Okay I replaced the image:

Comment posted by sohaib

Thanks for looking into that – I’ve uploaded the image online and used that in codepen but like you mentioned @ManojKumar, it seems to show up fine. However I did try to run my app again today but I’m still getting the same issue locally so not sure what the problem could be here. I also tried the image you used in my local environment and also got the same issue but it happened when I extended the screen to be wider this time, so maybe it’s to do with the size of the image?

Comment posted by sohaib

Hmmm thanks for trying Manoj. It’s really weird – it seems to work fine on codepen but not on my local machine