style tag in HTML and CSS rules at the same time

Question

This is what I'm getting: image_get

This is what I want: image_want

I'm using style tag to set images as backgrounds and separate CSS stylesheet to properly position them. I do bunch of

        <div class="game" style="background: url('https://somewhere/somegame.jpg');">

in my index.html

and

        .game {
              background-position: top center;
              background-repeat: no-repeat;
              background-size: cover;
}

in my styles.css

But CSS rules in styles.css aren't being applied. It works only if I move everything from styles.css to index.html or vice versa. There are many divs with 'game' class and different images.

Is there a way to get image_want with just setting background in style tag and do all resizing, etc. in stylesheet?

It works if I include

        background: url('https://somewhere/somegame.jpg');

in my styles.css or

       background-position: top center; background-repeat: no-repeat; background-size: cover;

in style tag

Whole code HTML:

<section id="top-games">
   <div class="container">
       <div class="games">
            <div class="game" style="
                    background: url('https://static-cdn.jtvnw.net/ttv-boxart/Fortnite.jpg');">
       <div class="games">
            <div class="game" style="
                    background: url('https://static-cdn.jtvnw.net/ttv-boxart/Fortnite.jpg');">...

CSS:

#top-games .games {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-gap: 10px;
    padding-bottom: 20px;
}
#top-games .games .game {
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 280px;
    border-radius: 5px;
    position: relative;
    -webkit-box-shadow: 0px 2px 3px 0px rgba(0,0,0,0.45);
    -moz-box-shadow: 0px 2px 3px 0px rgba(0,0,0,0.45);
    box-shadow: 0px 2px 3px 0px rgba(0,0,0,0.45);
    overflow: hidden;
    cursor: pointer;
}

PS: Sorry, my English might be bad

What is your Expectaion Output please clearify your problem with image or etc — Kiran Mistry
– Kiran Mistry, Commented Oct 19, 2019 at 14:07

pasanjg · Accepted Answer · 2019-10-19 14:34:28Z

1

Use background-image property.

Then adjust the div size as needed.

#top-games .games {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-gap: 10px;
  padding-bottom: 20px;
}

#top-games .games .game {
  background-position: top center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 280px;
  border-radius: 5px;
  position: relative;
  -webkit-box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.45);
  -moz-box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.45);
  box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.45);
  overflow: hidden;
  cursor: pointer;
}

<section id="top-games">
  <div class="container">
    <div class="games">
      <div class="game" style="background-image: url('https://static-cdn.jtvnw.net/ttv-boxart/Fortnite.jpg');"></div>
      <div class="game" style="background-image: url('https://static-cdn.jtvnw.net/ttv-boxart/Fortnite.jpg');"></div>
      <div class="game" style="background-image: url('https://static-cdn.jtvnw.net/ttv-boxart/Fortnite.jpg');"></div>
      <div class="game" style="background-image: url('https://static-cdn.jtvnw.net/ttv-boxart/Fortnite.jpg');"></div>
      <div class="game" style="background-image: url('https://static-cdn.jtvnw.net/ttv-boxart/Fortnite.jpg');"></div>
      <div class="game" style="background-image: url('https://static-cdn.jtvnw.net/ttv-boxart/Fortnite.jpg');"></div>
      <div class="game" style="background-image: url('https://static-cdn.jtvnw.net/ttv-boxart/Fortnite.jpg');"></div>

    </div>
  </div>
</section>

answered Oct 19, 2019 at 14:34

pasanjg

6566 silver badges13 bronze badges

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

1 Comment

frixaco Over a year ago

Oh thank you very much! It worked! Never thought that there were also background-image property)

Collectives™ on Stack Overflow

style tag in HTML and CSS rules at the same time

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related