Bootstrap 4 : two image overlay

up vote
-1
down vote

favorite

I need some help. I am supposed to do it, like in the screenshot. I tried to put the img (z-index: 5 over the colored line (z-index: 2).

enter image description here

My jsfiddle Demo

edited Nov 8 at 14:19

hellow

4,03622041

asked Nov 8 at 13:18

cyphos

176

add a comment |

up vote
-1
down vote

favorite

I need some help. I am supposed to do it, like in the screenshot. I tried to put the img (z-index: 5 over the colored line (z-index: 2).

enter image description here

My jsfiddle Demo

edited Nov 8 at 14:19

hellow

4,03622041

asked Nov 8 at 13:18

cyphos

176

add a comment |

up vote
-1
down vote

favorite

I need some help. I am supposed to do it, like in the screenshot. I tried to put the img (z-index: 5 over the colored line (z-index: 2).

enter image description here

My jsfiddle Demo

edited Nov 8 at 14:19

hellow

4,03622041

asked Nov 8 at 13:18

cyphos

176

I need some help. I am supposed to do it, like in the screenshot. I tried to put the img (z-index: 5 over the colored line (z-index: 2).

enter image description here

My jsfiddle Demo

bootstrap-4

edited Nov 8 at 14:19

hellow

4,03622041

asked Nov 8 at 13:18

cyphos

176

edited Nov 8 at 14:19

hellow

4,03622041

asked Nov 8 at 13:18

cyphos

176

edited Nov 8 at 14:19

hellow

4,03622041

edited Nov 8 at 14:19

hellow

4,03622041

edited Nov 8 at 14:19

hellow

4,03622041

asked Nov 8 at 13:18

cyphos

176

asked Nov 8 at 13:18

cyphos

176

asked Nov 8 at 13:18

cyphos

176

add a comment |

1 Answer
1

active

oldest

votes

up vote
0
down vote

I tried to code by looking at the picture.. Here is what I made.. Take a look at the code. I think I made what you were tryin to.. But even if it doesn't, then let me know..

#image {

	background: url('http://www.lefrancais.eu/files/2013/05/signature-contrat.jpg')

		no-repeat center/cover;

	margin: 0;

	padding: 0;

	width: 100%;

	height: 95vh;

	position: relative;

	overflow: hidden;

	z-index: -1;

}

#image-2 {

	margin-top: -100px;

	margin-bottom: -3.6%;

}

#image-2 img {

	height: 100px;

	width: 170px;

}

footer {

	width: 100%;

	height: 5vh;

	background-color: #333;

}

<!DOCTYPE html>

<html>



<head>

  <meta charset="utf-8" />

  <meta http-equiv="X-UA-Compatible" content="IE=edge">

  <title>Page Title</title>

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"

    crossorigin="anonymous">

  <link rel="stylesheet" type="text/css" media="screen" href="style.css" />

  <script src="script.js"></script>

</head>



<body>

  <div class="container">

    <div class="container-fluid">

      <div id="image">

        <h2 class="display-6 text-center mt-5 text-light">Découvrez tous nos

          programmes près de chez vous</h2>



      </div>

      <div id="image-2">

        <img src="https://image.freepik.com/icones-gratuites/logo-de-pomme_318-40184.jpg" alt="">

      </div>

    </div>

  </div>



  <footer>

  </footer>

</body>



</html>

answered Nov 8 at 17:17

Sahil S Shady

Hi Thanks but the img apple don't really align on bottom when i reduce the window for responsive.
– cyphos
Nov 9 at 13:38

For responsiveness, try applying some media queries to the img apple... I guess it could work...
– Sahil S Shady
Nov 11 at 4:18

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53208571%2fbootstrap-4-two-image-overlay%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

up vote
0
down vote

I tried to code by looking at the picture.. Here is what I made.. Take a look at the code. I think I made what you were tryin to.. But even if it doesn't, then let me know..

#image {

	background: url('http://www.lefrancais.eu/files/2013/05/signature-contrat.jpg')

		no-repeat center/cover;

	margin: 0;

	padding: 0;

	width: 100%;

	height: 95vh;

	position: relative;

	overflow: hidden;

	z-index: -1;

}

#image-2 {

	margin-top: -100px;

	margin-bottom: -3.6%;

}

#image-2 img {

	height: 100px;

	width: 170px;

}

footer {

	width: 100%;

	height: 5vh;

	background-color: #333;

}

<!DOCTYPE html>

<html>



<head>

  <meta charset="utf-8" />

  <meta http-equiv="X-UA-Compatible" content="IE=edge">

  <title>Page Title</title>

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"

    crossorigin="anonymous">

  <link rel="stylesheet" type="text/css" media="screen" href="style.css" />

  <script src="script.js"></script>

</head>



<body>

  <div class="container">

    <div class="container-fluid">

      <div id="image">

        <h2 class="display-6 text-center mt-5 text-light">Découvrez tous nos

          programmes près de chez vous</h2>



      </div>

      <div id="image-2">

        <img src="https://image.freepik.com/icones-gratuites/logo-de-pomme_318-40184.jpg" alt="">

      </div>

    </div>

  </div>



  <footer>

  </footer>

</body>



</html>

answered Nov 8 at 17:17

Sahil S Shady

Hi Thanks but the img apple don't really align on bottom when i reduce the window for responsive.
– cyphos
Nov 9 at 13:38

For responsiveness, try applying some media queries to the img apple... I guess it could work...
– Sahil S Shady
Nov 11 at 4:18

add a comment |

up vote
0
down vote

I tried to code by looking at the picture.. Here is what I made.. Take a look at the code. I think I made what you were tryin to.. But even if it doesn't, then let me know..

#image {

	background: url('http://www.lefrancais.eu/files/2013/05/signature-contrat.jpg')

		no-repeat center/cover;

	margin: 0;

	padding: 0;

	width: 100%;

	height: 95vh;

	position: relative;

	overflow: hidden;

	z-index: -1;

}

#image-2 {

	margin-top: -100px;

	margin-bottom: -3.6%;

}

#image-2 img {

	height: 100px;

	width: 170px;

}

footer {

	width: 100%;

	height: 5vh;

	background-color: #333;

}

<!DOCTYPE html>

<html>



<head>

  <meta charset="utf-8" />

  <meta http-equiv="X-UA-Compatible" content="IE=edge">

  <title>Page Title</title>

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"

    crossorigin="anonymous">

  <link rel="stylesheet" type="text/css" media="screen" href="style.css" />

  <script src="script.js"></script>

</head>



<body>

  <div class="container">

    <div class="container-fluid">

      <div id="image">

        <h2 class="display-6 text-center mt-5 text-light">Découvrez tous nos

          programmes près de chez vous</h2>



      </div>

      <div id="image-2">

        <img src="https://image.freepik.com/icones-gratuites/logo-de-pomme_318-40184.jpg" alt="">

      </div>

    </div>

  </div>



  <footer>

  </footer>

</body>



</html>

answered Nov 8 at 17:17

Sahil S Shady

Hi Thanks but the img apple don't really align on bottom when i reduce the window for responsive.
– cyphos
Nov 9 at 13:38

For responsiveness, try applying some media queries to the img apple... I guess it could work...
– Sahil S Shady
Nov 11 at 4:18

add a comment |

up vote
0
down vote

I tried to code by looking at the picture.. Here is what I made.. Take a look at the code. I think I made what you were tryin to.. But even if it doesn't, then let me know..

#image {

	background: url('http://www.lefrancais.eu/files/2013/05/signature-contrat.jpg')

		no-repeat center/cover;

	margin: 0;

	padding: 0;

	width: 100%;

	height: 95vh;

	position: relative;

	overflow: hidden;

	z-index: -1;

}

#image-2 {

	margin-top: -100px;

	margin-bottom: -3.6%;

}

#image-2 img {

	height: 100px;

	width: 170px;

}

footer {

	width: 100%;

	height: 5vh;

	background-color: #333;

}

<!DOCTYPE html>

<html>



<head>

  <meta charset="utf-8" />

  <meta http-equiv="X-UA-Compatible" content="IE=edge">

  <title>Page Title</title>

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"

    crossorigin="anonymous">

  <link rel="stylesheet" type="text/css" media="screen" href="style.css" />

  <script src="script.js"></script>

</head>



<body>

  <div class="container">

    <div class="container-fluid">

      <div id="image">

        <h2 class="display-6 text-center mt-5 text-light">Découvrez tous nos

          programmes près de chez vous</h2>



      </div>

      <div id="image-2">

        <img src="https://image.freepik.com/icones-gratuites/logo-de-pomme_318-40184.jpg" alt="">

      </div>

    </div>

  </div>



  <footer>

  </footer>

</body>



</html>

answered Nov 8 at 17:17

Sahil S Shady

I tried to code by looking at the picture.. Here is what I made.. Take a look at the code. I think I made what you were tryin to.. But even if it doesn't, then let me know..

#image {

	background: url('http://www.lefrancais.eu/files/2013/05/signature-contrat.jpg')

		no-repeat center/cover;

	margin: 0;

	padding: 0;

	width: 100%;

	height: 95vh;

	position: relative;

	overflow: hidden;

	z-index: -1;

}

#image-2 {

	margin-top: -100px;

	margin-bottom: -3.6%;

}

#image-2 img {

	height: 100px;

	width: 170px;

}

footer {

	width: 100%;

	height: 5vh;

	background-color: #333;

}

<!DOCTYPE html>

<html>



<head>

  <meta charset="utf-8" />

  <meta http-equiv="X-UA-Compatible" content="IE=edge">

  <title>Page Title</title>

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"

    crossorigin="anonymous">

  <link rel="stylesheet" type="text/css" media="screen" href="style.css" />

  <script src="script.js"></script>

</head>



<body>

  <div class="container">

    <div class="container-fluid">

      <div id="image">

        <h2 class="display-6 text-center mt-5 text-light">Découvrez tous nos

          programmes près de chez vous</h2>



      </div>

      <div id="image-2">

        <img src="https://image.freepik.com/icones-gratuites/logo-de-pomme_318-40184.jpg" alt="">

      </div>

    </div>

  </div>



  <footer>

  </footer>

</body>



</html>

#image {

	background: url('http://www.lefrancais.eu/files/2013/05/signature-contrat.jpg')

		no-repeat center/cover;

	margin: 0;

	padding: 0;

	width: 100%;

	height: 95vh;

	position: relative;

	overflow: hidden;

	z-index: -1;

}

#image-2 {

	margin-top: -100px;

	margin-bottom: -3.6%;

}

#image-2 img {

	height: 100px;

	width: 170px;

}

footer {

	width: 100%;

	height: 5vh;

	background-color: #333;

}

<!DOCTYPE html>

<html>



<head>

  <meta charset="utf-8" />

  <meta http-equiv="X-UA-Compatible" content="IE=edge">

  <title>Page Title</title>

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"

    crossorigin="anonymous">

  <link rel="stylesheet" type="text/css" media="screen" href="style.css" />

  <script src="script.js"></script>

</head>



<body>

  <div class="container">

    <div class="container-fluid">

      <div id="image">

        <h2 class="display-6 text-center mt-5 text-light">Découvrez tous nos

          programmes près de chez vous</h2>



      </div>

      <div id="image-2">

        <img src="https://image.freepik.com/icones-gratuites/logo-de-pomme_318-40184.jpg" alt="">

      </div>

    </div>

  </div>



  <footer>

  </footer>

</body>



</html>

#image {

	background: url('http://www.lefrancais.eu/files/2013/05/signature-contrat.jpg')

		no-repeat center/cover;

	margin: 0;

	padding: 0;

	width: 100%;

	height: 95vh;

	position: relative;

	overflow: hidden;

	z-index: -1;

}

#image-2 {

	margin-top: -100px;

	margin-bottom: -3.6%;

}

#image-2 img {

	height: 100px;

	width: 170px;

}

footer {

	width: 100%;

	height: 5vh;

	background-color: #333;

}

<!DOCTYPE html>

<html>



<head>

  <meta charset="utf-8" />

  <meta http-equiv="X-UA-Compatible" content="IE=edge">

  <title>Page Title</title>

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"

    crossorigin="anonymous">

  <link rel="stylesheet" type="text/css" media="screen" href="style.css" />

  <script src="script.js"></script>

</head>



<body>

  <div class="container">

    <div class="container-fluid">

      <div id="image">

        <h2 class="display-6 text-center mt-5 text-light">Découvrez tous nos

          programmes près de chez vous</h2>



      </div>

      <div id="image-2">

        <img src="https://image.freepik.com/icones-gratuites/logo-de-pomme_318-40184.jpg" alt="">

      </div>

    </div>

  </div>



  <footer>

  </footer>

</body>



</html>

answered Nov 8 at 17:17

Sahil S Shady

answered Nov 8 at 17:17

Sahil S Shady

answered Nov 8 at 17:17

Sahil S Shady

answered Nov 8 at 17:17

Sahil S Shady

Hi Thanks but the img apple don't really align on bottom when i reduce the window for responsive.
– cyphos
Nov 9 at 13:38

For responsiveness, try applying some media queries to the img apple... I guess it could work...
– Sahil S Shady
Nov 11 at 4:18

add a comment |

Hi Thanks but the img apple don't really align on bottom when i reduce the window for responsive.
– cyphos
Nov 9 at 13:38

For responsiveness, try applying some media queries to the img apple... I guess it could work...
– Sahil S Shady
Nov 11 at 4:18

Hi Thanks but the img apple don't really align on bottom when i reduce the window for responsive.
– cyphos
Nov 9 at 13:38

For responsiveness, try applying some media queries to the img apple... I guess it could work...
– Sahil S Shady
Nov 11 at 4:18

add a comment |

draft saved

draft discarded

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Xtykutl