I want to set two images beyond the another one image. Please find the below image i am trying to fix. But i couldn't to reach the solution.
.main {
border: 1px solid black;
background-color: white;
padding: 10px 10px 10px 10px;
width: 1100px;
height: 100%;
margin: auto;
}
.container-fluid {
background-image: url("bluescreen1.png");
background-size: 100% 15%;
background-repeat: no-repeat;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<body class="main">
<div class="container-fluid">
<div class="row" style="z-index: 1;">
<div class="col-sm-12">
<img src="http://u.realgeeks.media/legacyplusrealty/email.jpg">
</div>
</div>
<div class="row">
<div class="col-sm-4">
Some Text
</div>
<div class="col-sm-4">
<img src="http://u.realgeeks.media/legacyplusrealty/email.jpg" alt="Paris" style="width: 100%; height:320px; ">
</div>
<div class="col-sm-4">
<img src="http://u.realgeeks.media/legacyplusrealty/email.jpg" alt="Paris" style="width: 100%; height:320px; z-index: -100;">
</div>
</div>
</div>
</body>
I want to the above format of design. The blue color image shows beyond the two images. but i couldn't to do it. Please review and guide me...
add position:relative; to every img as z-index only works with positioned elements
Related
div.blog-post {
border: 1px #cdd1cd solid;
margin-bottom: 20px;
float: left;
margin-right: 90px;
box-shadow: 1px 1px 3px rgba(0,0,0,0.15);
height: auto;
width: auto;
}
div.blog-post img {
object-fit: cover;
width: auto;
height: auto;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="blog-post col-md-5">
<img class="img-fluid" src="http://localhost/wordpress/wp-content/themes/skyrocket/images/background.jpg"> <h2>test</h2>
<p>test</p>
</div>
What I am trying to do is to make the image fit the full width of the div and make the image as wide as the border but it is not working and the image is not as wide as the border as shown in the image below:
image
I managed to get it to work when I removed the col-md-5 class and I am interested in knowing why this is the case?
Thanks.
<div class="blog-post col-md-5">
<div class="row">
<img class="img-fluid" src="http://localhost/wordpress/wp-content/themes/skyrocket/images/background.jpg"> <h2>test</h2>
<p>test</p>
</div>
</div>
added div class= row (because of inner padding of col-md-5) if you are using bootstrap
I am trying to align two content next to each other in a way when the broswer minimizes, the content will not move/shrink/ until the screen touchees the content. I tried to replicated aligning two content close to each other but failed. Whenever the browser shrinks, the image shrinks right away instead of shrinking when the window touches the content. Below is the code I am using,
<div class="prod_section">
<div class="border col-md-6">
<img src="img/land_prod_one.jpg" class="word">
<h2>content1</h2>
</div>
<div class="border col-md-6">
<img src="img/land_prod_two.jpg" class="word">
<h2>content2</h2>
</div>
</div>
.prod_section{
margin: auto;
width: 60%;
padding: 10px;
padding-top:220px;
}
.word{
max-width:100%;
}
Below is an image displaying how I am trying to make the content look. This is in the website called Obey Clothing. If anyone can help out, it would greatly be appreciated. Thank you for your time.
1st, the width of the container is set to 60%, which cause your content to shrink sometime (depend on the size of the img)
2nd, you might want to add clearfix to your container check the two example below in full-page to see the difference.
.prod_section {
margin: auto;
width: 60%;
padding: 10px;
padding-top: 220px;
background: green;
}
.word {
max-width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="prod_section">
<div class="border col-md-6">
<img src="http://via.placeholder.com/150x350" class="word">
<h2>content1</h2>
</div>
<div class="border col-md-6">
<img src="http://via.placeholder.com/150x350" class="word">
<h2>content2</h2>
</div>
</div>
Solution:
.prod_section {
margin: auto;
width: 60%;
padding: 10px;
padding-top: 220px;
background: green;
}
.word {
max-width: 100%;
}
.clearfix:after {
content: " ";
visibility: hidden;
display: block;
height: 0;
clear: both;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="prod_section clearfix">
<div class="border col-md-6">
<img src="http://via.placeholder.com/150x350" class="word">
<h2>content1</h2>
</div>
<div class="border col-md-6">
<img src="http://via.placeholder.com/150x350" class="word">
<h2>content2</h2>
</div>
</div>
I am trying to set image on the right of the div. But somehow the image is not fitting in the div.
HTML:
<div class="container" >
<div class= "row list-container">
<div class="col-md-10">
<h3>This contains some description</h3>
</div>
<div class="col-md-2" >
<img src = "img/Websitebackground.jpg" class = "img-responsive">
</div>
</div>
</div> <!-- /.container -->
CSS:
#list-section{
background:white;
margin-top:100px;
}
.list-container{
margin:20px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
Demo: https://jsfiddle.net/sakib_rahman_cse11/czLvkr7z/
What I want is something like this: http://imgur.com/a/x8lXs
If I truly understand you...
Images have default property display: inline-block; And this cause a 5px white space under the image. If you want to remove this 5px space, set this:
.img-responsive { display: block;}
Does this look like something you tried to achieve?
You can play around with width and height (absolute or relative), but the main Idea is that you use background-image instead of <img> tag, and use background-size:100% auto; to make it responsive as described
here .
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<style>
html, body, .container {
width: 100%;
height: 100%;
}
.desc-bg-div {
height: 20%;
background-image: url("http://i.imgur.com/TpVSw4X.jpg");
background-repeat: no-repeat;
background-position: right;
padding: 0;
position: relative;
}
.opaque-div {
background: rgb(0, 0, 0); /* Fallback for older browsers without RGBA-support */
background: rgba(0, 0, 0, 0.5);
color: #ffffff;
width: 100%;
position: absolute;
bottom: 0;
text-align: center;
}
</style>
</head>
<body>
<div class="container" >
<div class="row outer">
<div class="col-md-10">
<p>your content goes here</p>
</div>
<div class="col-md-2 desc-bg-div">
<div class="opaque-div">
<h3 class="description">This contains some description</h3>
</div>
</div>
</div>
</div>
</body>
</html>
Using Responsive Tags
I have used col-xs-* instead of col-md-* and it all works
<div class="container" >
<div class= "row list-container">
<div class="col-xs-10">
<h3>This contains some description</h3>
</div>
<div class="col-xs-2" style="padding:0 !important; margin: 0 !important">
<img src = "http://i.imgur.com/TpVSw4X.jpg" >
</div>
</div>
</div> <!-- /.container -->
https://jsfiddle.net/sakib_rahman_cse11/czLvkr7z/
The web page looks fine. However, when changing my browser window size, the content of the container is pushed up and down. Thus it either leaves a lot of container free space or just disappears (like it is under the next container).
But I would like it to always be inside the container with the same proportions.
Here is my code:
.first {
padding-left: 5%;
}
.second {
padding: 80px 50px 0px 70px;
background-size: cover;
}
.fourth {
margin-top: 7%;
}
.third {
padding-top: 80px;
padding-bottom: 65px;
height: 678px;
position: relative;
width: 100%;
min-height: auto;
overflow-y: hidden;
background: url("http://htmlcolorcodes.com/assets/images/html-color-codes-color-tutorials-hero-00e10b1f.jpg");
background-size: cover;
}
.selling-text {
font-family: Ubuntu;
font-size: 20px;
padding-top: 27%;
text-align: center;
color: black;
margin-left: 2%;
}
.second-block {
background: #F2EADC;
height: 500px;
background-image: url("http://www.planwallpaper.com/static/images/824183-green-wallpaper.jpg");
background-size: cover;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="third container-fluid">
<div class="col-md-6">
<div class="device">
<div class="screen">
<!-- Demo image for screen mockup, you can put an image here, some HTML, an animation, video, or anything else! -->
<img src="http://happybirthdaycakeimages.com/wp-content/uploads/2015/05/Yummy-Chocolate-Birthday-Cake.jpg" class="img-responsive first" alt="">
</div>
</div>
</div>
<div class="col-md-6">
<div class="second">
<img src="http://gypsea.com.au/wp-content/uploads/2015/07/freeship.png" class="img-responsive" alt="">
<div class="fourth">
<button type="button" class="button btn-block">MENU</button>
</div>
</div>
</div>
</div>
<div class="second-block container-fluid">
<div class="col-md-6">
<div class="screen">
<p class="selling-text">
See the best cake recipes.
Trusted recipes for chocolate cake,
white cake, banana cakes,
and carrot cakes with photos and
tips from home cooks.
</p>
</div>
</div>
<div class="col-md-6 second">
<div class="videoWrapper shadow">
<iframe width="560" height="315" src="https://www.youtube.com/embed/JM_Q7HR55DY" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>
I don't know why JSFiddle doesn't work with jQuery 1.11.1, it looks different from what I see connecting it locally.
Ok, I think that the problem is with the fixed height for your <div class="third container-fluid">, which has a height of 678px. To be more specific: as the columns move when you resize your window, the fixed height is becoming a problem because your container has less px than the combined height of your child elements - the col's.
Here is a JSFiddle where I have just commented out the fixed height
I am trying to center some so that they are displayed within the center, however the tricky part is the html is within a number of (part of the html is static, and part of it is dynamic from a database).
See the screenshot as an example of how it currently looks (I want this content in the centre)
http://postimg.org/image/5fc6ecgy7/
note - the site is using the base 960 grid system
Below is the HTML:
<div class="">
<div class="">
<div class="">
<div id="national-prize-feed" class="panel-wrapper ">
<div class="border">
<div class="content clearfix add-radius">
<div style="padding:10px 0px;">
<div id="nation-prizes-collection" class="clearfix">
<div class="summary"></div>
<div class="">
<div class="national-prizes">
<div class="prizes">
<img class="prizes-img" alt="iPod Shuffle" src="/images/prizes/ipod-shuffle.png">
</div>
</div>
<div class="national-prizes">
<div class="prizes">
<img class="prizes-img" alt="Football" src="/images/prizes/football.png">
</div>
</div>
</div>
<div class="keys" title="/pages/index/slug/prizes" style="display:none">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
My specific css (there is a lot more.. it is based on a grid based layout)
div.prizes {
float: left;
}
div.prizes img {
width: 280px;
}
.prizes-img {
padding: 0 7px 0 7px;
margin: 7px 5px 7px 5px;
max-width: 100%;
height: auto;
}
In order to position a DIV to the center of a screen, you need to set a static width of the div to be centered, left: 0px, right: 0px, and the respective margins to auto.
Here is an example: http://jsfiddle.net/pR4hq/
<style>.center{
position: relative;
display: block;
width: 120px;
background: rgb(90,90,90);
left: 0px;
right: 0px;
margin-left: auto;
margin-right: auto;
text-align: center;
}</style>
<div class="center">Center Content</div>