Member Avatar for beforetheyknew

Okay I've got 2 more problems for you guys!

1. I have to insert images using css (so im using background img) which works fine, and i've background-positioned it right, which is fine, but obviously the text goes over it. How can i change it so the text stops before the background image on each line. Sorry i dont know the command. Would i have to position the text? they're both in the same div.


2. I used the code below to put the next div on a separate line, its done that perfectly but also its sort of broken up the background color of white, so now only each p tag has white around it. Any ideas why? i dont know how to change it.

#divname   {
            clear: left;
      }
  • 3 Contributors
  • 5 Replies
  • 104 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by beforetheyknew

Dani AI

Generated

Two separate causes are at work in this thread: a CSS background image does not participate in layout (so inline text will sit on top of it unless the box is given internal space), and floated children can make a parent container "collapse" so its background only shows behind non-floated elements. described both symptoms, pointed toward spacing, and correctly asked for markup — both directions are useful.

To keep text clear of a decorative background image, give the box internal space on the side where the image sits (padding equal to the image width plus any gap). If the image must be precisely positioned or layered, place it with a positioned pseudo-element so the graphic is decorative and the padding still controls text flow. If the image conveys content, use an actual <img> for accessibility instead of a background.

To restore the full background behind a row of floated images, make the parent contain its floats (floats are taken out of normal flow so the parent can collapse). Two robust options are the clearfix pattern and the modern block-formatting approach. Example clearfix:

.code
.clearfix::after {
content: "";
display: table;
clear: both;
}
.endcode

Add the class to the parent. A simpler modern alternative is to give the parent a block-formatting context (for example, display: flow-root) or switch the layout to flexbox/grid so floats are not needed. For background and layout details see MDN on CSS backgrounds and block formatting context (background) (block formatting context), and a practical clearfix reference at CSS-Tricks (clear-fix). Use clearfix for widest compatibility; use flow-root or flex/grid when targeting modern browsers.

Recommended Answers

All 5 Replies

Member Avatar for pritaeas

1. If your text is in a <p> tag, you can adjust the right margin or padding, so it will not cover the image.

2. Unsure what you mean.

Member Avatar for beforetheyknew

For 1, thanks a lot. For 2 I mean i have a bunch of pictures that are supposed to be side by side and then a div and then another load of em. The div is supposed to be separated so i used clear: left, but now my background color is sort of broken and only shows for each of the p tags (which surround the picture) but not the full box.

Member Avatar for pritaeas

Sorry, need a visual. Do you have a link ?

Member Avatar for ko ko

Less information and we can't help you. Post both HTML and CSS.

Member Avatar for beforetheyknew

Hi guys sorry been busy with uni, yeah no problems got it fixed. I couldn't post it due to half the page being derived from under external secured site. Still hard to explain but basically i set overflow to auto. No problems thanks guys.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.