I have to put several images and texts on the site and they should be in the same position as the background image but when I minimize the screen size the proportionality is lost, I tried with an image of the text that I needed and it worked for me but I can not do that work with texts
Thank you very much for your help i've just been stuck for the hole day trying to find the solution
.title {
width: 74.5%;
}
/*text image png
.title.s1{
position: absolute;
margin-top: 36%;
}
/*text in h1*/
h1.title.s1 {
color: rgb(60, 255, 0);
position: absolute;
margin-top: 34.5%;
margin-bottom: 0;
text-align: center;
display: inline;
}
<div id="r_bg-img">
<img src="/img/rokubun_background.png" width="100%">
</div>
<div class="content">
<img src="/img/title1.png" class="title s1" >
<h1 class="title s1">The premise</h1>
</div>
In the link there's the output , the gray text is added as an img and the green text is added as a and below those elements the background titles are in orange
If you want to make your contents propotional, you can use the styles like below.
We can use the padding-top property as a percentage to make the gap between your contents like headers and images.
Here this is an example I tried, You can apply the styles properly for our contents. It is easy to create an outer and inner containers to keep the contents like headers and images.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.container {
background-color: red;
position: relative;
width: 100%;
height:100%;/* 1:1 Aspect Ratio */
}
.container .outer {
width: 100%;
padding-top: 5%; /* defines aspect ratio */
position: relative;
}
.container .outer .inner {
text-align:center;
position: relative;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
img {
display: block;
width: 50%;
height: 50%;
padding: 0% 25%;
}
h1 {
margin:auto;
color: rgb(60, 255, 0);
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<div class="outer">
<h1 class="inner">Your content</h1>
</div>
<div class="outer">
<img src ="https://www.pngmart.com/files/13/Tetris-PNG-Free-Download.png">
</div>
<div class="outer">
<h1 class="inner">Your content</h1>
</div>
<div class="outer">
<img src ="https://www.pngmart.com/files/13/Tetris-PNG-Free-Download.png">
</div>
</div>
</body>
</html>
You can follow this to get an idea https://wellcaffeinated.net/articles/2012/12/10/very-simple-css-only-proportional-resizing-of-elements#:~:text=For%20proportional%20resizing%20purposes%2C%20it,the%20aspect%20ratio%20you%20need.&text=And%20that's%20it!
Hope this will help you and think this is what you want to do.
Related
I'm trying to put two elements on the top right of a card, but I don't want them to stack. In front of that I want them to stay next to each other but at the top right.
I've seen this W3S page, more in detail the 'Positioning Text in an Image'.
This is the example I'm using right now but only works for one element, if I add a new element with the same class they overlay each other:
<!DOCTYPE html>
<html>
<head>
<style>
.container {
position: relative;
}
.topright {
position: absolute;
top: 8px;
right: 16px;
font-size: 18px;
}
img {
width: 100%;
height: auto;
opacity: 0.3;
}
</style>
</head>
<body>
<h2>Image Text</h2>
<p>Add some text to an image in the top right corner:</p>
<div class="container">
<img src="img_5terre_wide.jpg" alt="Cinque Terre" width="1000" height="300">
<div class="topright">Top Right</div>
<div class="topright">Top Right overlayed</div>
</div>
</body>
</html>
Is there any way of automate the positioning the topright elements next to each other without making two classes and setting the positions manually?
Thank you.
You can simply use flex and other flex properties to make sure the top-right is not stacking each each and this way it will be responsive as well on modern browsers.
I would not suggest using position: absolute or custom top or right for this type of thing.
Live Demo:
.container {
display: flex;
position: relative;
}
.topright {
font-size: 18px;
}
.top_right_item {
display: flex;
justify-content: space-between;
flex-grow: 0;
flex-shrink: 0;
flex-basis: 35%;
}
img {
width: 100%;
height: auto;
opacity: 0.3;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h2>Image Text</h2>
<p>Add some text to an image in the top right corner:</p>
<div class="container">
<img src="img_5terre_wide.jpg" alt="Cinque Terre" width="1000" height="300">
<div class="top_right_item">
<div class="topright">Top Right</div>
<div class="topright">Top Right overlayed</div>
</div>
</div>
</body>
</html>
.topright {
display:flex;
flex-direction:row;
position: absolute;
top: 8px;
right: 16px;
font-size: 18px;
}
<div class="topright">
<div>Top Right</div>
<div>Hello</div>
</div>
Your problem is solved.
What you have to do is put them in separate divs and wrap them in topright div, and set display to flex,thats all.
You can make an wrapper for the two elements
<div class="topright-wrapper">
<span>Top Right</span>
<span>Top Right Right</span>
</div>
CSS:
.topright-wrapper {
display: flex;
position: absolute;
top: 8px;
right: 16px;
font-size: 18px;
}
I'm trying to put a logo on the top left corner, and text parallel to the logo (top center).
The text should have the same distance from both sides of the page regardless of the logo.
I tried adding around "display: table; display: table-cell; position: relative; position: absolute;"
But the best I can get is text being centered but not on the same line as the logo but a bit low.
html:
<header class="header">
<div class="logo">
<img src="logo.gif" alt="a logo">
</div>
<div class="header-text">
Some text that is supposed to be centered in viewport
</div>
</header>
css:
.header {
border: 2px solid black;
width: 100%;
}
.logo img {
width: 80px;
}
.header-text {
text-align: center;
}
example image:
You could use position: absolute; and i've added the position to the title and gave it a wrapper together with the image so you can move them together.
I've also added some margin to show you the title stays centered
.header {
border: 2px solid black;
width: 100%;
position: relative;
}
.wrapper {
width: 100%;
position: relative;
margin: 30px 0;
}
.logo {
display: flex;
}
.logo img {
width: 80px;
}
.header-text {
text-align: center;
position: absolute;
width: 100%;
top: 50%;
transform: translateY(-50%);
}
<header class="header">
<div class="wrapper">
<div class="logo">
<img src="https://via.placeholder.com/150" alt="a logo">
</div>
<div class="header-text">
Some text that is supposed to be centered in viewport
</div>
</div>
</header>
use flexbox!
.header {
border: 2px solid black;
width: 100%;
display:flex;
justify-content:space-between;
align-items:center;
}
img ,#spacer{
width: 80px;
}
.header-text {
text-align: center;
}
<header class="header">
<img src="https://via.placeholder.com/150" alt="a logo">
<div class="header-text">
Some text that is supposed to be centered in viewport
</div>
<div id='spacer'></div>
</header>
There a numerous ways to go about this; I'll describe one method here.
Basically, you need to get the logo out of the layout flow so that the text can be centered without being affected by it. the easiest way to do this is by adding position: absolute to the logo.
Thus, a complete example might look like:
.header {
/* Allows the logo to be positioned relative to the header */
position: relative;
/* Centers the text — can be done other ways too */
text-align: center;
}
.header .logo {
position: absolute;
left: 0;
}
A JSFiddle Example: https://jsfiddle.net/g01z27tv/.
Keeping Proper Alignment
If you want to keep the logo and the text properly (vertically) aligned, flexbox will be your friend here.
First, ensure that the header is taller than the logo will be; otherwise the logo will be cut off.
Next, create a wrapper <div> for your logo. In your case:
<header class="header">
<div class="logo-wrapper">
<div class="logo">
<img src="logo.gif" alt="a logo">
</div>
</div>
<!-- ... -->
</header>
Now, add some styles for .logo-wrapper. Namely:
cause it to expand to fill the height of the header,
make it a flex container,
make its items' vertically centered,
make it position: absolute, and
position it to the left of the header:
.logo-wrapper {
height: 100%;
display: flex;
align-items: center;
position: absolute;
left: 0;
}
Note that you should now remove position: absolute and left: 0 from .logo, since we are positioning the wrapper instead.
Lastly, in order to properly align the text, we'll use flexbox on .header:
.header {
display: flex;
justify-content: center; /* Use this instead of text-align: center */
align-items: center;
}
You'll note now that even when you make the logo taller—as long as the header is taller—everything stays aligned.
An Update JSFiddle Example: https://jsfiddle.net/oL5un8gb/.
Note: I created a separate wrapper <div> in this example; in your case you probably don't need to because you have a separate <div> and <img> already. You might be able to get it to work without an extra element.
.header {
border: 2px solid black;
width: 100%;
}
.logo {
float: left;
}
.header-text {
text-align: center;
position: absolute;
width:100%;
margin: auto;
}
.header::after {
content: "";
clear: both;
display: table;
}
<header class="header">
<div class="logo">
<img src="https://via.placeholder.com/75" alt="a logo">
</div>
<div class="header-text">
Some text that is supposed to be centered in viewport
</div>
</header>
As suggested in comments I have edited the text to be centred to 100% width.
I found a post here where the same question was asked before. I implemented the solution suggested there and it works fine with Chrome and Firefox. But when I tested it on Safari and Opera, I ended up with a long horizontal scrollbar. I'm not sure how to fix it since I've already added using overflow-x: hidden to the body. You can see it in action here.
HTML
<div class="container">
<div class="level"></div>
<div class="level purple"></div>
<div class="level"></div>
</div>
CSS
html, body {
overflow-x: hidden;
}
.container {
width:960px;
margin: 0 auto;
border:1px solid black;
}
.level {
height:100px;
background: #bada55;
}
.purple {
position: relative;
background: #663399;
}
.purple:before,
.purple:after {
content: "";
position: absolute;
background: #663399; /* Match the background */
top: 0;
bottom: 0;
width: 9999px; /* some huge width */
}
.purple:before {
right: 100%;
}
.purple:after {
left: 100%;
}
I checked in the link(www.kampuster.com) you shared and found the problem with your code.
Problem:
In file all/themes/bootstrap_kampuster/css/style.css, you have provided width: 9999px; for classes .homeBanner:before, .homeBanner:after and .countUpSection:before, .countUpSection:after which is causing the whole problem and is not the right way to do it.
Suggestion:
Below is the approach I would suggest you to go with.
Here is a pen to better illustrate the suggestion.
.section-first, .section-third {
background-image: url('http://www.kampuster.com/sites/default/files/bannerlogo_babson.jpeg');
background-attachment: fixed;
background-size: cover;
}
.section-first-inner {
background-color: rgba(83, 192, 183, 0.3);
}
.section-first, .section-second, .section-third {
/* this is just to add height inplace of content */
height: 600px;
color: #ffffff;
overflow: hidden;
}
.section-first-inner, .section-second-inner, .section-third-inner {
padding: 20px 20px;
font-size: 18px;
height: 100%;
}
.section-second {
color: #000;
}
<link href="http://cdn.jsdelivr.net/bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML</title>
</head>
<body>
<div class="main-container">
<header id="page-header"></header>
<div class="section-first">
<div class="section-first-inner">
<div class="container">
<div class="row">
<div class="col-sm-12">
Your content for section first goes here
</div>
</div>
</div>
</div>
</div>
<div class="section-second">
<div class="section-second-inner">
<div class="container">
<div class="row">
<div class="col-sm-12">
Your content for section second goes here
</div>
</div>
</div>
</div>
</div>
<div class="section-third">
<div class="section-third-inner">
<div class="container">
<div class="row">
<div class="col-sm-12">Your content for section third goes here</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Instead of setting width:960px; on the container try setting view width: width: 100vw;
So the container css will be:
.container {
width: 100vw;
margin: 0 auto;
border:1px solid black;
}
just use .container-fluid class.
<div class="container-fluid" style="background-image:url('xample.jpg')">
<div class="row">
<div class="col-sm-12">
<div class="container">
<div class="row">
<div class="col-sm-12">
your content here
</div>
</div>
</div>
</div>
</div>
Full width background inside Bootstrap container!!
If this is what you want (Example Demo)
Then simply use Relative Lengths :
vw Relative to 1% of the width of the viewport*
vh Relative to 1% of the height of the viewport*
I have only replaced 2 values in your code:
.container {
width:100vw;
}
.purple:after {
width: 100vw; /* some huge width */
}
Code:
<!-- Latest compiled and minified CSS -->
<
link rel = "stylesheet"
href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" >
<!-- jQuery library -->
<
script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js" > < /script>
<!-- Latest compiled JavaScript -->
<
script src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" > < /script>
html,
body {
overflow-x: hidden;
}
.container {
width: 100vw;
margin: 0 auto;
border: 1px solid black;
}
.level {
height: 100vh;
background: #bada55;
}
.purple {
position: relative;
background: #663399;
}
.purple:before,
.purple:after {
content: "";
position: absolute;
background: #663399;
/* Match the background */
top: 0;
bottom: 0;
width: 100vw;
/* some huge width */
}
.purple:before {
right: 100%;
}
.purple:after {
left: 100%;
}
<div class="container">
<div class="level"></div>
<div class="level purple"></div>
<div class="level"></div>
</div>
Please try this, this is working for me.
add the below css, if doesn't work try adding important to them. And to get full width of container, add container-fluid class to particular container.
html, body {
width: -webkit-fill-available;
overflow-x: hidden;
}
I'm trying to create a simple HTML page. Now, I'm trying to add bg-image / color. So I have this simple html tag:
<html>
<style type="text/css">
.header {
height: 100px;
}
.kontent1 {
height: 50px;
margin-top: 10px;
}
.kontent2 {
height: 50px;
margin-top: 10px;
}
</style>
<div class="bgheader"></div>
<div class="header">HEADER</div>
<div class="kontent1"> KONTENT </div>
<div class="bgfooter"></div>
<div class="kontent2"> KONTENT</div>
<div class="footer">FOOTER</div>
</html>
So, what I want to achieve is something like this:
How can this be achieved?
UPDATE
I'm have tried this:
body{
background:
url('<?=base_url();?>/assets/header_bg.png')no-repeat 100px -30px,
url('<?=base_url();?>/assets/footer_bg.png')no-repeat 0px 96%;
background-size: contain;
max-height:80%;
padding-top: 20px;
margin-bottom:10px;
}
but it's not responsive, because when the page height change, the backgrounds are broken.
You can use the below code for adding 2 images in div:
background-image: url(image1.png), url(image2.png);
background-position: center bottom, left top;
background-repeat: no-repeat;
You can go though the below links for better understanding:
http://www.css3.info/preview/multiple-backgrounds/
https://www.w3schools.com/css/css_background.asp
You can use background-color to achieve background color and background-image for image as background on these containers. As you have two different containers, its better approach to background them separately instead of using background on body or parent div.
You can try something like this,
.header-container, .footer-container {
width: 200px;
height: 200px;
border: 2px solid black;
text-align: center;
text-transform: uppercase;
}
.header, .content {
min-height: 100px;
}
.header-container {
background-color: #DD3388;
}
.footer-container {
background-color: #33DD44;
}
<html>
<head>
</head>
<body>
<div class="header-container">
<div class="header"> Header </div>
<div class="content"> Content </div>
</div>
<div class="footer-container">
<div class="content"> Content </div>
<div class="footer"> Footer </div>
</div>
</body>
</html>
This is what I am trying to achieve:
An image positioned in between two separate div tag like facebook profile page:
I searched here but the solutions did not help much. It got positioned as I wanted but since it is bootstrap and it should responsive, when the screen size decreases the image position gets changed, which I do not want.
Here is the code(which might not be proper as I was just testing) -
HTML -
<div class="container">
<div class="jumbotron jumbo" id="custjumbo">
<h1>This is a jumbotron... </h1>
<h2>Let's see what can we make of it..</h2>
<br>
<img src="images/tiger.jpg" class="img-thumbnail" alt="Tiger"
width="304" height="236">
</div>
</div>
The CSS -
.container {
background-color: cadetblue;
}
.jumbo {
margin-top:20px;
position: relative;
}
.img-thumbnail {
position: absolute;
bottom: -60px;
right: 200px;
}
img {
display: block;
width: 200px;
height: 200px;
background: green;
}
This is what I got after:
You could try to change the img-thumbnail to position: relative and use 'bottom: -60px' instead of positioning absolute, that can reposition the image without the use of absolute positioning
check it
.container {
background-color: cadetblue;
width:100%;
}
.jumbo {
margin-top:20px;
position: relative;
}
.img-thumbnail {
position: absolute;
bottom: -90px;
left:15%;
}
img {
display: block;
width: 200px;
height: 200px;
background: green;
}
.bottom-div {
height:200px;
background-color:red;}
<head>
<meta name="viewport" content="width=device-width, initial-sclae=1">
</head>
<div class="container">
<div class="jumbotron jumbo" id="custjumbo">
<h1>This is a jumbotron... </h1>
<h2>Let's see what can we make of it..</h2>
<br>
<img src="images/tiger.jpg" class="img-thumbnail" alt="Tiger"
width="304" height="236">
</div>
<div class="bottom-div"></div>
</div>