Having this issue getting a background to work... It requires an image of 3 parts.. (top, center, bottom)
I've got it close.. i'm sure i'm missing something easy... Please check out this jsfiddle and see if it can get dialed in!
http://jsfiddle.net/bb6hZ/
Thanks!!
What I have:
<article>
<div class="bg1">
<div class="bg2">
<h2>post name title here yo</h2>
<span class="meta">September 10, 2012</span>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</article>
I'm using two extra bg div's to try and acheive this... I created the image file already, it is located here: http://www.pacificcheese.com/img/int/bg_article.png
I've done this many times before in the past I just can't remember exactly how... Haven't needed to use this method in years.
Help would be appreciated!!! THanks!
got it!
the trick is to float all the elements... see js fiddle:
http://jsfiddle.net/bb6hZ/2/
article,.bg1,.bg2 {background:url("http://www.pacificcheese.com/img/int/bg_article.png") -556px 0 no-repeat; float:left;}
article {display:block; width:556px; background-position:0 0; padding-top:130px;}
.bg1 {background-repeat:repeat-y;}
.bg2 {background-position:-1112px 100%; margin:-130px 0; padding:30px 20px 45px;}
try this:
.bg1 {background-repeat:repeat-y; border:transparent 1px solid; }
Related
Someone with no coding experience is trying HTML. I feel really stupid to ask this question, but I am stuck on this for two weeks.
A picture says more than a thousand words. I made a page in a web builder, but I want to replicate it in HTML (with bootstrap 5). I want an image fullscreen left half and text right half of the screen.
Now I tried it in HTML. I used 2 col-md columns in a row that will stack when the device width gets below 768px. The first column has a full height and full width (50% when device wider than 768px) image as background. Second column has text. I want the image to stay full height, no scroll on the left side of page. I used this code:
<body>
<div class="container-fluid">
<div class="row align-items-center">
<div class="col-md plaatje vh-100"> </div>
<div class="col-md text-center px-5 py-5">
<h1>
<b>NAME</b>
</h1>
<p class="text-secondary">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis volutpat.
</p>
</div>
</div>
</div>
<style>
.plaatje {
background: url("https://www.vitality-club.nl/wp-content/uploads/2021/11/IMG_9218.jpeg") no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
</style>
</body>
The problem is that when the viewport in the browser is smaller than the text on the right side I can scroll the image and see white bars above and below the image. Please help me get it fixed. (I used a background image, but maybe that is not the best way. Feel free to change that.)
i didn't really understand your question 100%, but made a Code Snippet with HTML and CSS from what i understand. In my CSS i used vw (view width to make it responsive) and for the padding "rem" (font size) instead of px to make it responsive.
-Noel
body {
height: 100vh;
width: 100vw;
margin: 0;
}
.left {
position: fixed;
height: 100%;
right: 50vw;
top: 0;
bottom: 0;
left: 0;
background-image: url("https://www.vitality-club.nl/wp-content/uploads/2021/11/IMG_9218.jpeg");
background-position: center;
background-size: cover;
}
.right {
float: right;
width: 50vw;
padding: 0 2.5rem 0 1rem;
box-sizing: border-box;
text-align: center;
}
<body>
<div class="left"></div>
<div class="right">
<h1>NAME</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</body>
Is there a CSS only trick to make this happen:
An element is placed in position absolute x,y on the screen. The document has a vertical scroll depending on its content. Can the height be controlled based on the available visible viewport area?
Exampe 1:
Exampe 2:
HTML:
<div id="dialog">
Change my height with no JS :)
</div>
<div id="content">
... content
</div>
JS Fiddle: https://jsfiddle.net/8dj4xz2q/
yes it is you can do this using VH property and also using css calc to calculate right height.
check out the snippet.
#content{
font-size:100px;
color:#CCC;
}
#dialog {
position:absolute;
top:100px;
left:100px;
border: solid 1px red;
height:calc(100vh - 130px);
overflow-y:scroll;
width:200px
}
<div id="dialog">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div id="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
I am new here. I have a slight problem with this area. I have a background image with a picture at the bottom right and in my PSD, I want to make the text look like this: Original
but currently in my code, it looks like this:Current
As you can see, the text actually flows beneath the div without automatically breaking line. Appreciate if there's any solution to this, thanks in advance!
I have two separate images. One is for the background image (Full cyan background) and another one is the ipad image which is positioned absolute and also positioned to the bottom right of the background image.
HTML:
<section id="ipadsection">
<div class="container fluid bgimage">
<div class="blockoftext">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<div class="ipadimg">
<img src="assets/img/ipad.jpg" alt="ipad">
</div>
</div>
</div>
</section>
CSS:
.bgimage {
background: url('../img/backgroundipad_03.jpg');
height: 400px;
background-size: cover;
position: relative;
}
.blockoftext {
float: left;
text-align: left;
}
.ipadimg {
position: absolute;
bottom: 0px;
right: 0px;
float: right;
margin-bottom: 1px;
width:50%;
}
The main problem with your existing code is the position: absolute you used and that the image element weren't placed correct in the markup.
As the <div class="ipadimg"> div (and its CSS rule) isn't necessary I removed that, moved the img before the last paragraph and added this new rule.
.blockoftext img {
float: right;
}
Stack snippet
.blockoftext {
float: left;
text-align: left;
}
.blockoftext img {
float: right;
}
<div class="blockoftext">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<img src="http://www.placehold.it/300x150" alt="ipad">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
Update based on comment
Here is the text splitted into to 2 groups. The down side is that the user, which can edit the text, need to know it has to be splitted so a part of the text will wrap around the image.
Side notes:
I personally would solve this issue by making a text template and then measured the newly edited text and then injected the floated image into it. (can't make a sample how-to though, as I'm not using WordPress)
If users are allowed to edit the text, it might be appropriate to let them change image as well. Their text might say something that is not accurate with the existing one
.blockoftext, .blockoftext-withimg {
float: left;
text-align: left;
}
.img-right {
float: right;
}
<div class="blockoftext">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div class="blockoftext-withimg">
<img class="img-right" src="http://www.placehold.it/300x150" alt="ipad">
<span class="txt-left">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</span>
</div>
The float property in CSS is all you need to create text that 'wraps around' your image. This creates an image that is positioned within the text-flow of your document, but 'floated' to the left, or to the right.
"Floating" is ignored if you used a specific type of element positioning, like position: absolute. When you use absolute positioning, the picture is actually taken out of the document flow, and placed on a 'layer' of its own - and this is why it's showing on top of your text. In order to get your layout to work, you may need to do the following:
remove the absolute positioning from the picture
do not float the text - place the text as normal inline content.
place the picture within the text, and float it to the right.
You can find out more about floating pictures here:
http://www.w3schools.com/css/css_float.asp
I have an issue with my HTML/CSS code. I have a parent div (secClass)and within that I have 2 child divs(secClass1 and secClass2). The problem is that the contents of the child divs are not being contained in the parent div. Do you know whats the issue here? I have included the screenshot and code for reference.
div.secClass {
background-color: 806815;
height: 1000px;
}
div.secClass1 {
background-color: D4BD6A;
display: inline-block;
}
div.secClass2 {
background-color: D4BD6A;
display: inline-block;
}
<div id="section" class="secClass">
<div class="secClass1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div class="secClass2">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
<div id="Lnav" class="navClass">
<div class="navClassItems"><hr>
Main Page<br><hr>
Metrics <br><hr>
Contact us<br><hr>
</div>
</div>
div.navClass
{
float:left;
background-color:D4BD6A;
width:150px;
height:700px;
}
div.navClassItems
{
text-align:center;
}
Since you have your navClass float left, the issue is that the secClass div cannot fit since it is 100% width by default. If you conceptually make it 100% - 150px, your secClass div will pop up into that spot. For example:
#Wrapper{
...
width:1000px;
...
}
.navClassItems {
...
width:150px;
...
}
.secClass {
...
width:850px;
...
}
With
<div id="wrapper">
<div id="Lnav" class="navClass">
<div class="navClassItems"><hr>
Main Page<br><hr>
Metrics <br><hr>
Contact us<br><hr>
</div>
</div>
<div id="section" class="secClass">
<div class="secClass1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div class="secClass2">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
Do not forget to account for margin or padding. Look into box-sizing and CSS display: inline vs inline-block SO article for more info.
Sorry, I just saw I misnamed the .navClassItems to .navClass. Should be more accurate now.
article {
background-color:#d5ecf2;
width:1024px;
height:200px;
margin: 0 auto;
}
.articletext {
float:right;
height:180px;
width:720px;
margin:10px;
}
<article>
<div class="articletext">
<h3>GDS 114.01: HTML and Javascript</h3>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</article>
<hr>
<article>
<div class="articletext">
<h3>GDS 115.01: Digital Graphics for Gaming</h3>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</article>
<hr>
<article>
<div class="articletext">
<h3>Personal Work</h3>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</article>
On one of my pages I have 4 articles each with the same color background (#d5ecf2). My thought is to have these articles (and any future ones) rotate back and forth between the previous mentioned hex color and another hex color (#7c96a5). One way (which I guess you could call the long way) is to have two div id's or classes each with the different background colors and placing them individually in the HTML code, I was wondering if there is a way that you can automatically set the next article with the background color opposite of the one before it?
If they all appear on the same page, you can use the nth-child CSS selector:
article:nth-child(odd) {
background: #7c96a5;
}
Or, since you have other elements in the container div, use nth-of-type:
article:nth-of-type(odd) {
background: #7c96a5;
}
Close #Chris but you will need to use 2n:
article:nth-of-type(2n) {
background: #7c96a5;
}
Here is the fiddle