I am trying to create a simple landing page with a background image and a lot of text on it. The problem I have is that the text overflows the image and you can't see all the text. How do I make it so the text fits and is readable to the user?
<div class="bgimg">
<div class="topleft">
<p>Logo</p>
</div>
<div class="middle">
<h1>COMING SOON</h1>
<hr>
<p>A week ago a friend invited a couple of other couples over for dinner. Eventually, the food (but not the wine) was cleared off the table for what turned out to be some fierce Scrabbling. Heeding the strategy of going for the shorter, more valuable word over the longer cheaper word, our final play was “Bon,” which–as luck would have it!–happens to be a Japanese Buddhist festival, and not, as I had originally asserted while laying the tiles on the board, one half of a chocolate-covered cherry treat. Anyway, the strategy worked. My team only lost by 53 points instead of 58.
Just the day before, our host had written of the challenges of writing short. In journalism–my friend’s chosen trade, and mostly my own, too–Mark Twain’s observation undoubtedly applies: “I didn’t have time to write a short letter, so I wrote a long one instead.” The principle holds across genres, in letters, reporting, and other writing. It’s harder to be concise than to blather. (Full disclosure, this blog post will clock in at a blather-esque 803 words.) Good writing is boiled down, not baked full of air like a souffl??. No matter how yummy souffl??s may be. Which they are. Yummy like a Grisham novel.
Lately, I’ve been noticing how my sentences have a tendency to keep going when I write them onscreen. This goes for concentrated writing as well as correspondence. (Twain probably believed that correspondence, in an ideal world, also demands concentration. But he never used email.) Last week I caught myself packing four conjunctions into a three-line sentence in an email. That’s inexcusable. Since then, I have tried to eschew conjunctions whenever possible. Gone are the commas, the and’s, but’s, and so’s; in are staccato declaratives. Better to read like bad Hemingway than bad Faulkner.
Length–as we all know, and for lack of a more original or effective way of saying it–matters. But (ahem), it’s also a matter of how you use it. Style and length are technically two different things.
Try putting some prose onscreen, though, and they mix themselves up pretty quickly. This has much to do with the time constraints we claim to feel in the digital age. We don’t have time to compose letters and post them anymore–much less pay postage, what with all the banks kinda-sorta losing our money these days–so we blast a few emails. We don’t have time to talk, so we text. We don’t have time to text to specific people, so we update our Facebook status. We don’t have time to write essays, so we blog.
I’m less interested by the superficial reduction of words–i.e. the always charming imho or c u l8r–than the genres in which those communications occur: blogs, texts, tweets, emails. All these interstitial communiques, do they really reflect super brevity that would make Twain proud? Or do they just reflect poorly stylized writing that desperately seeks a clearer form?
I rather think the latter. Clive Thompson wrote last month in the NYT Magazine that constant digital updates, after a day, can begin “to feel like a short story; follow it for a month, and it’s a novel.” He was right to see the bits as part of a larger whole. The words now flying through our digital pipes & ether more or less tend to resemble parts of bigger units, perhaps even familiar genres. But stories and novels have definite conclusions; they also have conventional lengths. Quick, how long is the conventional blog, when you add up all of its posts and comments? How long is the longest email thread you send back and forth on a single topic?
Most important: What exactly are we writing when we’re doing all of this writing? I won’t pretend to coin a whole new term here; I still think the best we can muster is a more fitting analogue. And if we must find an analogue in an existing literary unit, I propose the paragraph. Our constant writing has begun to feel like a neverending digital paragraph. Not a tight, stabbing paragraph from The Sun Also Rises or even a graceful, sometimes-slinking, sometimes-soaring paragraph from Absalom! Absalom!, I mean a convoluted, haphazard, meandering paragraph, something like Kerouac’s original draft of On the Road–only taped together by bytes. And 1 percent as interesting.
Paragraphs, particularly those that wrap from one page to the next, inherently possess a necessary suspension that tightens the reader’s focus yet breaks down the narrative into digestable sections. Just like emails or blogs or texts. The mental questions while reading all of these feel the same:
“Is this the last line or is there more?”
“Is the writer really trying to say something here, or just setting up a larger point?”
“Does this part have the information I’m looking for?”</p>
</div>
<div class="bottomleft">
<p>Some text</p>
</div>
</div>
I know it is a lot of text but that isn't the important part. The important part is to make it so the user can see it all.
My css:
body, html {
height: 100%
}
.bgimg {
/* Background image */
background-image: url('https://www.w3schools.com/w3images/forestbridge.jpg');
/* Full-screen */
height: 100%;
/* Center the background image */
background-position: center;
/* Scale and zoom in the image */
background-size: cover;
/* Add position: relative to enable absolutely positioned elements inside the image (place text) */
position: relative;
/* Add a white text color to all elements inside the .bgimg container */
color: white;
/* Add a font */
font-family: "Courier New", Courier, monospace;
/* Set the font-size to 25 pixels */
font-size: 25px;
}
/* Position text in the top-left corner */
.topleft {
position: absolute;
top: 0;
left: 16px;
}
/* Position text in the bottom-left corner */
.bottomleft {
position: absolute;
bottom: 0;
left: 16px;
}
/* Position text in the middle */
.middle {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
/* Style the <hr> element */
hr {
margin: auto;
width: 40%;
}```
https://jsfiddle.net/9136cgvo/
You need to play with the overflow of your parent div. Here is the jsfiddle for it, I also changed your position: absolute to fixed so that they stay at the same place even if you scroll.
html, body {
height: 100%;
margin: 0;
padding: 0;
}
.bgimg {
background-image: url('https://www.w3schools.com/w3images/forestbridge.jpg');
height: 100%;
background-position: center;
background-size: cover;
position: relative;
color: white;
font-family: "Courier New", Courier, monospace;
font-size: 20px;
overflow-x: scroll;
}
.topleft {
position: fixed;
top: 0;
left: 16px;
}
.bottomleft {
position: fixed;
bottom: 0;
left: 16px;
}
.middle {
position: absolute;
top: 4em;
left: 50%;
transform: translateX(-50%);
text-align: center;
}
hr {
margin: auto;
width: 40%;
}
<div class="bgimg">
<div class="topleft">
<p>Logo</p>
</div>
<div class="middle">
<h1>COMING SOON</h1>
<hr>
<p>A week ago a friend invited a couple of other couples over for dinner. Eventually, the food (but not the wine) was cleared off the table for what turned out to be some fierce Scrabbling. Heeding the strategy of going for the shorter, more valuable word over the longer cheaper word, our final play was “Bon,” which–as luck would have it!–happens to be a Japanese Buddhist festival, and not, as I had originally asserted while laying the tiles on the board, one half of a chocolate-covered cherry treat. Anyway, the strategy worked. My team only lost by 53 points instead of 58.
Just the day before, our host had written of the challenges of writing short. In journalism–my friend’s chosen trade, and mostly my own, too–Mark Twain’s observation undoubtedly applies: “I didn’t have time to write a short letter, so I wrote a long one instead.” The principle holds across genres, in letters, reporting, and other writing. It’s harder to be concise than to blather. (Full disclosure, this blog post will clock in at a blather-esque 803 words.) Good writing is boiled down, not baked full of air like a souffl??. No matter how yummy souffl??s may be. Which they are. Yummy like a Grisham novel.
Lately, I’ve been noticing how my sentences have a tendency to keep going when I write them onscreen. This goes for concentrated writing as well as correspondence. (Twain probably believed that correspondence, in an ideal world, also demands concentration. But he never used email.) Last week I caught myself packing four conjunctions into a three-line sentence in an email. That’s inexcusable. Since then, I have tried to eschew conjunctions whenever possible. Gone are the commas, the and’s, but’s, and so’s; in are staccato declaratives. Better to read like bad Hemingway than bad Faulkner.
Length–as we all know, and for lack of a more original or effective way of saying it–matters. But (ahem), it’s also a matter of how you use it. Style and length are technically two different things.
Try putting some prose onscreen, though, and they mix themselves up pretty quickly. This has much to do with the time constraints we claim to feel in the digital age. We don’t have time to compose letters and post them anymore–much less pay postage, what with all the banks kinda-sorta losing our money these days–so we blast a few emails. We don’t have time to talk, so we text. We don’t have time to text to specific people, so we update our Facebook status. We don’t have time to write essays, so we blog.
I’m less interested by the superficial reduction of words–i.e. the always charming imho or c u l8r–than the genres in which those communications occur: blogs, texts, tweets, emails. All these interstitial communiques, do they really reflect super brevity that would make Twain proud? Or do they just reflect poorly stylized writing that desperately seeks a clearer form?
I rather think the latter. Clive Thompson wrote last month in the NYT Magazine that constant digital updates, after a day, can begin “to feel like a short story; follow it for a month, and it’s a novel.” He was right to see the bits as part of a larger whole. The words now flying through our digital pipes & ether more or less tend to resemble parts of bigger units, perhaps even familiar genres. But stories and novels have definite conclusions; they also have conventional lengths. Quick, how long is the conventional blog, when you add up all of its posts and comments? How long is the longest email thread you send back and forth on a single topic?
Most important: What exactly are we writing when we’re doing all of this writing? I won’t pretend to coin a whole new term here; I still think the best we can muster is a more fitting analogue. And if we must find an analogue in an existing literary unit, I propose the paragraph. Our constant writing has begun to feel like a neverending digital paragraph. Not a tight, stabbing paragraph from The Sun Also Rises or even a graceful, sometimes-slinking, sometimes-soaring paragraph from Absalom! Absalom!, I mean a convoluted, haphazard, meandering paragraph, something like Kerouac’s original draft of On the Road–only taped together by bytes. And 1 percent as interesting.
Paragraphs, particularly those that wrap from one page to the next, inherently possess a necessary suspension that tightens the reader’s focus yet breaks down the narrative into digestable sections. Just like emails or blogs or texts. The mental questions while reading all of these feel the same:
“Is this the last line or is there more?”
“Is the writer really trying to say something here, or just setting up a larger point?”
“Does this part have the information I’m looking for?”</p>
</div>
<div class="bottomleft">
<p>Some text</p>
</div>
</div>
This is code from a jekyll blog but I use CSS from an external CSS file to determine its styling. How do I make the following image become a full background image like those on medium posts?
The code is for this [webpage][1] and the images in the post.
HTML
img {
max-width: 100%;
font-style: italic;
vertical-align: middle;
border: 0;
}
<p><img src="http://tanaka.co.zw/images/posts/fowlplague.gif" alt="Fowl plague"></p>
<p>This article has left me most thoughtful about my present and future. It and other readings I will cite at the bottom will examine an issue of interest to me, and perhaps to all of us in many ways. Share your thoughts with me.
Outbreak: Our Next Global Pandemic
In May of 1997, a boy in Hong Kong is diagnosed with a new form of influenza- H5- he was dead within days. Within months, the Chinese government had ordered the slaughter of 1.2 million birds to curb the spread of the outbreak.
Epidemics and pandemics have historically been the greatest existential dangers our species has faced. We spend trillions on defense but [war and violence](https://ourworldindata.org/slides/war-and-violence/#/title-slide) has really killed just 167 million to 188 million in the last century.</p>
<img src="http://tanaka.co.zw/images/posts/democracy.png" alt="The History of Conflict">
Try to use
img{
width: 100%;
// or min-width
min-width:100%;
// or viewwidth
width: 100vw;
}
I want to place the text below the image.But when i add a paragraph, it is set behind the image. How to fix this please ???
<div style="width:96%;"><img src="../Images/2.jpg" height="640" style="position: absolute; left: 0px; top: 0px; width: 1200px; height: 700px; float: left; z-index: 0;"/></div>
<div><p>Vision defines the optimal desired future state and the conceptual image of what an organization wants to achieve over time. It provides guidance and inspiration to what an organization is focused on achieving in some time. It is written briefly in an inspirational manner that makes it easy for all employees to repeat it at any given time. “All Sri Lankans seamlessly connected with world-class information, communication and entertainment services" is the vision of SLT.</p><</div>
You positioned the picture absolute, thats why it is in a layer above the text.
simply drop the style and the text follows vertically after the block element div.
body{
margin:0;
}
<div style="width:96%;">
<img src="http://i.imgur.com/0nJG7lN.png" />
</div>
<p>Vision defines the optimal desired future state and the conceptual image of what an organization wants to achieve over time. It provides guidance and inspiration to what an organization is focused on achieving in some time. It is written briefly in an inspirational manner that makes it easy for all employees to repeat it at any given time. “All Sri Lankans seamlessly connected with world-class information, communication and entertainment services" is the vision of SLT.</p>
Since the DIV is positioned absolute
place the <p> tag inside that DIV right after the <img> tag.
Hope it will work.
I'm working with a basic 3-column layout, using HTML and CSS. My columns float left, so when I resize the width of the window, the columns gradually "collapse". i.e. First, col-3 will collapse under col-1, then col-2 will collapse under col-1.
HTML:
<div id="col2">
<p>Quick win face time goalposts wheelhouse mobile friendly. Pixel pushing. On your plate. Who's responsible for the ask for this request?. Market-facing drink from the firehose, or table the discussion , we need distributors to evangelize the new line to local markets. Baseline the procedure and samepage your department. Are we in agreeance cross sabers timeframe, so productize baseline the procedure and samepage your department. Not the long pole in my tent not the long pole in my tent red flag.</p>
</div>
<div id="col3">
<p>We need to leverage our synergies three-martini lunch not the long pole in my tent, yet cloud strategy. Killing it where do we stand on the latest client ask curate sacred cow, so drop-dead date herding cats. I just wanted to give you a heads-up win-win-win get all your ducks in a row action item not enough bandwidth. Closer to the metal i don't want to drain the whole swamp.</p>
</div>
CSS:
body {
width: 90%;
max-width: 1000px;
margin: 0 auto; }
#col1, #col2, #col3 {
float: left;
width: 30%;
margin: 10px;
min-width: 200px; }
What I would like to happen is this. At a specified width, the 3 columns will collapse directly into 1 column (col1 above col2 above col3), instead of them moving one at a time.
Can this be done with HTML & CSS, or is another language required? How do I accomplish this?
You can use
body {
width: 90%;
max-width: 1000px;
margin: 0 auto;
}
#col1, #col2, #col3 {
float: left;
width: 30%;
margin: 10px;
min-width: 200px;
}
#media (max-width: 768px) { /*set here you specified width*/
#col1, #col2, #col3 {
width: 100%;
}
}
<div id="col3">
<p>3333We need to leverage our synergies three-martini lunch not the long pole in my tent, yet cloud strategy. Killing it where do we stand on the latest client ask curate sacred cow, so drop-dead date herding cats. I just wanted to give you a heads-up win-win-win get all your ducks in a row action item not enough bandwidth. Closer to the metal i don't want to drain the whle swamp.</p>
</div>
<div id="col2">
<p>Quick win face time goalposts wheelhouse mobile friendly. Pixel pushing. On your plate. Who's responsible for the ask for this request?. Market-facing drink from the firehose, or table the discussion , we need distributors to evangelize the new line to local markets. Baseline the procedure and samepage your department. Are we in agreeance cross sabers timeframe, so productize baseline the procedure and samepage your department. Not the long pole in my tent not the long pole in my tent red flag.</p>
</div>
<div id="col3">
<p>We need to leverage our synergies three-martini lunch not the long pole in my tent, yet cloud strategy. Killing it where do we stand on the latest client ask curate sacred cow, so drop-dead date herding cats. I just wanted to give you a heads-up win-win-win get all your ducks in a row action item not enough bandwidth. Closer to the metal i don't want to drain the whole swamp.</p>
</div>
Here a jsfiddle example to play with
If the content inside your div#col is really text, not just an example I really recommend you use: CSS3 Multiple Columns
I need to get my text to fit around my div on the this page.
<div id="othermain">
Is your big day approaching? Need a Wedding Dress, Bridesmaid Dress or any Bridal Wear altering or remodelling? You are definitely looking in the right place, this is our speciality! </p><br><br> At Bobbin Alterations,
we want to make sure that your dress is the perfect fit and style for you, for your special occasion. whether it be a Wedding, Prom, a dinner or any other special occasion. We understand that planning you're
big celebration can be very demanding at times, but we're here to take your worries away and make it as stress free as possible.<br><br> Looking good and comfortability is crucial, and with our help, we can tailor and alter a dress the highlights your features and make you feel wonderful.
<div id="testimonial"></div>
<br><br>Our standard dress alterations include:<br>
<br> - Shortening
<br> - Seams
<br> - Hemlines
<br> - Beading
<br> - Shoulder Adjustments
<br> - Straps
<br> - Veils
<br> - Zips<br>
<br>We've had the privilege of helping with endless amounts of weddings and proms and take extreme pride in the happiness that is made through our work.<br>
<br><br>Use the Order form to place an order, or call us on 01325 59976 with an Enquiry, to guarantee a First Class service and a truly memorable occasion.
</div>
Above is my code for bridal.html and below is my css code for the two elements in question:
#testimonial{background: url(../img/testimonial.fw.png); width: 700px; height: 300px; margin-left:320px; display: block; background-repeat:no-repeat;}
#ordermain {width:1024px; height: 700px}
All help is greatly appreciated. I have tried numerous methods. THanks
Remove the left margin and make the div float right.
#testimonial{
background: url(../img/testimonial.fw.png);
width: 700px;
height: 300px;
display: block;
background-repeat: no-repeat;
float: right;
}