CODEWITHSUNDEEP
htmlcss
frixaco
frixaco

Reputation: 30

style tag in HTML and CSS rules at the same time

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

Upvotes: 0

Views: 173

Answers (1)

pasanjg
pasanjg

Reputation: 646

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>

Upvotes: 1

Related Questions