one background image divided in multiple divs

Question

I have some issue about achieving this. I put the the back ground image in multiple divs, but it's not quite working. Image is repeating on fixed when I make the screen smaller or bigger. when I change it to absolute then every div having an image to itself.

Is it possible to fix these problem?

here it's fiddle:

header {
    position: relative;
    height: 100vh;
    padding: 75px;
}


header div.container {
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 350px;
    height: 425px;
    display: flex;
    overflow: hidden;
}
header div.container .context {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}



/*
= cols
=== */
header
.container
.col {
    width: 50%;
    height: 425px;
}
header
.container
.col
.image {
    height: 100%;
    height: 50%;
    background-image: url("https://i.imgur.com/jtZfhST.png");
    background-attachment: fixed;
    background-position: top left;
}

header
.container
#col-left {
    position: relative;
    z-index: 2;
    top: 12.5px;
}
header
.container
#col-left
.image1, .image3 {
    margin-right: 2px;
}
header
.container
.col
.image1, .image2 {
    margin-bottom: 2px;
}


header
.container
#col-right {
    position: relative;
    z-index: 2;
    bottom: 12.5px;
}

<header>
    <div class="container">            
        <div class="col" id="col-left">
            <div class="image image1"></div>
            <div class="image image3"></div>
        </div>
        <div class="col" id="col-right">
            <div class="image image2"></div>
            <div class="image image4"></div>
        </div>
    </div>
</header>

maybe background-repeat https://www.w3schools.com/cssref/pr_background-repeat.asp — hawkstrider, Sep 20 '19 at 15:47
sorry for not mentioning it, when I use no-repeat on fixed. image disappears. @bhmahler — yvl, Sep 20 '19 at 15:49
then every div has own image. one image is not shared by multiple divs. @j08691 — yvl, Sep 20 '19 at 15:51
it kinda should look like this: https://imgur.com/a/MWUbXFY @j08691 — yvl, Sep 20 '19 at 15:52
What are you trying to do exactly? can you please explain more? — Evik Ghazarian, Sep 20 '19 at 16:05
It's answered here : https://stackoverflow.com/questions/55567319/how-can-i-get-a-background-image-to-be-spanned-over-a-grid-layout — Evik Ghazarian, Sep 20 '19 at 16:16

score 1 · Accepted Answer · answered Sep 20 '19 at 16:18

Is this what you're looking for?

.split {
    background-image: url(https://images.unsplash.com/photo-1568955773021-d347deaffa1a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1289&q=80);
    background-attachment: fixed;
    width: 30%;
    height: 300px;
    margin: 0 10px 10px 0;
    display: inline-block;
    background-size: cover;
      background-position: center;
}

.container {
    margin: 10px 0 0 10px;
}

<div class="container">
    <div class="row">
        <div class="split"></div>
        <div class="split"></div>
        <div class="split"></div>
    </div>
    <div class="row">
        <div class="split"></div>
        <div class="split"></div>
        <div class="split"></div>
    </div>
</div>

one background image divided in multiple divs

1 Answers1