What I want:
What I want (crop first one, too, but keep symmetry):
What I have:
div.row.separator div.col {
height: 40px;
width: 100%;
padding: 0px;
background-image: url("./images/rhomb.png");
background-repeat: repeat-x;
}
rhomb.png:
<div class="container-fluid" id="main-content">
<div class="row">
<div class="col">
<h1>Title here 1</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras
luctus eros at maximus tincidunt. Donec fringilla mattis massa,
vitae blandit massa egestas sed. Maecenas ipsum ligula, pretium
nec pellentesque convallis, consequat at magna.</p>
</div>
</div>
<div class="row separator">
<div class="col">
</div>
</div>
.......
Body is gray, container is white. I want a line of rhombs after a section as separator.
So, having a small image used as background repeat-x in a div is it possible to prevent crop on last one or make the same crop on first one (align center the repetitive background...)?
UPDATE: Feel free to experiment: https://github.com/GhitaB/sample-design-bootstrap4-css (I'm just curious. Not a real problem for me.)
Even though space in background-repeat is still poorly supported, the twin property in border-image has a good support (starting in IE11)
.test {
height: 0px;
width: 182px;
margin: 5px;
border-style: solid;
border-width: 0px;
border-bottom-width: 38px;
border-image: url(https://i.stack.imgur.com/8aOpi.png) 0 0 38 0 space;
}
.test:nth-child(2) {
width: 210px;
}
.test:nth-child(3) {
width: 220px;
}
.test:nth-child(4) {
width: 250px;
}
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
Replacing:
background-repeat: repeat-x;
with
background-repeat: space;
seems to solve my problem. (Not 100%, but in almost all cases)
space: tile the image in both directions. Never crop the image unless a single image is too large to fit. If multiple images can fit, space them out evently images always touching the edges.
(https://css-tricks.com/almanac/properties/b/background-repeat/)
Also: https://www.impressivewebs.com/space-round-css3-background/
Basically, when it comes to the background, sadly, we aren't able to resize images expressly. We can fill the whole page or keep the pictures original image. My idea for this would be to create multiples of the image your self using a picture editing software and then add the repeated image in the full screen format.
Related
I am new to learning HTML/CSS, and I have come across a bug in my code.
As you can see in the image below, the shoe in the header is overlapping into the "Featured Products" container. I've tried using z-index, but I'm not 100% how they work and they dont seem to be working for me.
screenshot
Any ideas as to why this is happening?
Thank you in advance,
Code:
https://hastebin.com/akelazivap.xml
set the first div's z-index to -1 and the second div's opacity to less than 1
(If you don't know what opacity is here is a link "https://www.w3schools.com/css/css_image_transparency.asp")
.first{
background: red;
height: 150px;
position: absolute;
z-index: -1;
top: 0;
}
.second{
margin-top: 150px;
background-color: green;
z-index: 2;
opacity: 0.8;
height: 200px;
}
<body>
<section class="first">
<h1>HI</h1>
<img src="https://pngimg.com/uploads/dog/dog_PNG50348.png" width="200">
</section>
<section class="second">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent non sodales elit. Vivamus sodales, velit nec accumsan pellentesque, odio lorem blandit felis, eget facilisis quam lectus aliquet nulla. Pellentesque id fermentum lorem. Produi.</section>
</body>
The easiest way to fix this is to use clip: rect. You can also change transparent collor to not transparent or set max height for shoe div.
This is because of the padding: 7rem 0; you applied to section.featured in CSS. It's better to apply height for your section.featured or define a new section called section.inner-featured in section.featured and put everything in it and then apply padding-y to the inner section.
you have an alpha channel on the background color. If you set it to 1 , then it will hide the shoe.
i.e. .featured { background: rgba(255, 210, 150, 0.92);} change it to .featured {background: rgba(255, 210, 150, 1);}
im trying to reproduce this piece of website:
here's mine now and im gonna explain why im struggling
Im struggling with the way to do it, i can move the description close to the logo playing with margin but when i move the size of my screen everything gonna be messed up and i feel like its not the right move to do. Im trying to use flex-boxe but i feel like i messed up the whole part and i should restart again i show you the big picture now:
And here's the whole code for all that part
<div class="container-services_display">
<img src="images/main-feature.png">
<div class="circle">
<div class="icon_placement">
<i class="material-icons">android</i>
</div>
<div class="icon_placement2 ball_design">
<i class="fas fa-circle"></i>
</div>
</div>
<div class="description-services_right">
<h2> UX design </h2>
<p>Coucou les amis je suis entrain de faire un site chiant</p>
<p>Coucou les amis je suis entrain de faire un site chiant</p>
</div>
</div>
css:
.container-services_display
{
margin-top: 110px;
display: flex;
justify-content: space-around;
}
.ball_display
{
display: flex;
justify-content: center;
}
.ball_design
{
color: rgb(82, 162, 201);
font-size: 14px;
}
.circle
{
width: 75px;
height: 75px;
background-color: white;
border-radius: 75px;
border: 1px solid rgb(237, 238, 239, 1);
border-opacity: 0.5;
}
.icon_placement
{
position: relative;
left: 24px;
top: 22px;
color: rgb(96, 174, 209);
}
.icon_placement2
{
position: relative;
left: 68px;
}
So basically its wrapper on a container, im trying to display it on the horizontal with flex and they space it but i feel like i miss a part of this, what i would do is making another div for the logo + description and displaying again with flex but it seemed like its not working, i just need some hint and sorry i only got less than 20 hours of css =D
since you are using css flex then you need to add flex: 1 and little margin if you want it for spacing
.description-services_right {
flex: 1;
margin-left: 20px;
}
see the fiddle
here is bootstrap version if you want to go with bootstrap
.side-pic{
max-width: 100%;
width: 100px;
height: auto;
}
.mtop{
margin-top: 20px;
}
.side-pic-holder{
text-align: center;
}
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-md-2 side-pic-holder">
<img class="side-pic" src="http://random-ize.com/lorem-ipsum-generators/lorem-ipsum/lorem-ipsum.jpg" />
</div>
<div class="col-md-10">
<h4>some title</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet</p>
</div>
</div>
<div class="row mtop">
<div class="col-md-10">
<h4>some title</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet</p>
</div>
<div class="col-md-2 side-pic-holder">
<img class="side-pic" src="http://random-ize.com/lorem-ipsum-generators/lorem-ipsum/lorem-ipsum.jpg" />
</div>
</div>
</div>
make sure you view it as full screen
Media Query
In Order to have a clean and responsive Website you will need to use some Media Queries. If your are new to Media Query, check it out here.
In the Media Query you can define your CSS Classes and stylings like
usually, the only difference is it will be only applied if the
condition is true. For Example: If the screen-width is less than 768px
#media(max-width: 768px){
.description-services_right{
width: 100%;
}
}
Bootstrap
There is an other Way, probably the easier and quicker one, using Bootstrap 3/4, if your never heard of Bootstrap you can read their Doc here.
Bootstrap lets you create Quickly Responsive Websites just by adding
premade classes to your HTML Elements.
Bootstrap biggest Advantage is its Grid System, before i get into too much explanations you should check it out if you are interested.
I created two Pens where i made your Code Responsive, i kept all the HTML Elements but deleted all unnecessary CSS.
You can even compare the Bootstrap and Non-Bootstrap Version i made to see how much Coding you can avoid.
Pen without Bootstrap
Pen with bootstrap
And here a Demo how Bootstraps Grid System works
PURPOSE
Having an editable div in which the text flows in different "simulated" pages, so to obtain an effect like Word. At the moment, I'm interested to have this working in Chrome (no crossbrowser compatibility).
WHAT I'VE DONE
I've created an editable div (pagina) already filled with some text. Inside this div there are 2 divs: block1 and block2.Block1 is a floating right div that simulates the page height.Block2 is a floating left div that simulate the space between pages.The effect I've obtained is a long text "broken" into pages. In my code I've used different background colors to have a better view of the various divs.
THE PROBLEM
When I move the cursor at the beginning of a new "page" and I press [return] more times, the new lines are moved at the right side of the above block2 div (the pages sepatator). If I type something, single letters appears in the right side (see screenshot below).
Problem screenshot
In this Fiddle (http://jsfiddle.net/n4d2jtd9/4/) you can see my experiments result.
.pagina {
width: 200px;
background-color: #AAA;
}
div.block1 {
float: right;
width: 100px;
height: 100px;
background-color: #CCC;
}
div.block2 {
float: left;
width: 200px;
height: 100px;
background-color: #FFF;
}
<body>
<div class="pagina">
<div class="block1"></div>
<div class="block2"></div>
<div class="block1"></div>
<div class="block2"></div>
<div contenteditable="true" style="width:90px;background-color:#DDD;word-break:break-all;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec libero mi, tempus in tincidunt vitae, aliquet nec nibh. Integer egestas leo vel orci
</div>
</div>
</body>
THE QUESTION
Is there a way to prevent that text effect?
CONSIDERATIONS
When you press [enter] inside an editable div, Chrome adds a div tag per paragraph (and a br tag when you press [enter]+[shift]).
The created "empty" div is always <div><br></div>. Having a zero width, the floating div moves this tag to right. I've noticed that if I put a space char inside the div, it works properly. Maybe jQuery can help.
New Code: based on browsers:
working demo: http://jsfiddle.net/n4d2jtd9/9/
HTML
<body>
<div class="pagina">
<div class="block1"></div>
<div class="block2"></div>
<div class="block1"></div>
<div class="block2"></div>
<div id="editable" contenteditable="true" style="width:90px;background-color:#DDD;word-break:break-all;
">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec libero mi, tempus in tincidunt vitae, aliquet nec nibh. Integer egestas leo vel orci
</div>
</div>
</body>
CSS
#editable{white-space:normal}
}
/* Chrome 29+ */
#media screen and (-webkit-min-device-pixel-ratio:0)
and (min-resolution:.001dpcm) {
#editable{white-space:pre-line;}
}
/* Chrome 22-28 */
#media screen and(-webkit-min-device-pixel-ratio:0) {
.selector {-chrome-:only(;
#editable{white-space:pre-line;}
);}
}
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 5 years ago.
Improve this question
I'm trying to do a boxes like below for my website's events but I got stuck.
The problems I can not solve:
Reduce images to the same size
Create modules of the same size
Align the modules in the same line
.background {
width:360px;
height:200px;
}
.image{
width:100%;
height:100%;
}
.text {
width:100%;
height:25%;
color:#ffffff;
background:blue;
z-index: auto;
}
<div class="background">
<div class="image">
<img src="https://zero.eu/content/uploads/2017/01/Ryley_Walker-730x490.jpg" width="360" height="200" class="wp-image-156 hoverZoomLink" alt="Willie Peyote Live">
</div>
<div class="text">
<p>test test test</p>
</div>
</div>
Questions... and answers. Let's go over the issues you have one by one.
Reduce images to the same size
It's best to let CSS take care of this. By setting the background of an element to the image you want and setting the background-size to cover, the browser will scale the image such that the aspect ratio is maintained and the image nicely covers all of the element you put it in.
Now make all elements the same size and voilà, this point is done.
Create modules of the same size
This can be achieved in two ways.
Set fixed sizes on your boxes.
Use more advanced CSS, in particular the flexbox layout module.
To keep things simple, I'll use the first approach for now. Read up on flex if you are interested in it!
Align the modules in the same line
This can be achieved in many ways, but the most straightforward one is setting display to inline-block. This will make it so that every block in your module is treated as a, well, a block, meaning that it can have a set width and height. At the same time, it is laid out as if it were text. So, one block after another will simply go on the same line. When that does not fit on screen anymore, blocks will flow to the next line.
Putting this all together. Here is a quick toy example that includes all of the above. It should serve as a good starting point to build from.
.card {
display: inline-block;
vertical-align: top;
width: 150px;
height: 270px;
margin: 10px;
padding: 0;
border: 1px solid #444;
border-radius: 5px;
}
.image {
/* width is 100%, so 150px, by default */
height: 150px;
background-size: cover;
}
.text {
height: 150px;
margin-top: -40px;
}
.text > p {
max-height: 90px;
overflow: hidden;
text-overflow: ellipsis;
}
h1 {
margin: 0;
padding: 10px;
background: rgba(0, 0, 0, 0.7);
color: #eee;
font-size: 20px;
line-height: 20px;
}
p {
margin: 0;
padding: 10px;
font-size: 15px;
line-height: 20px;
}
<div class="card">
<div class="image"
style="background-image: url('http://lorempixel.com/150/150/abstract/');"></div>
<div class="text">
<h1>Foo</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec faucibus auctor odio, sed lobortis odio pellentesque tincidunt. Curabitur et libero maximus, consequat mi non, dignissim turpis.</p>
</div>
</div>
<div class="card">
<div class="image"
style="background-image: url('http://lorempixel.com/150/150/city/');"></div>
<div class="text">
<h1>Bar</h1>
<p>Sed ac lacus vel mi mollis ullamcorper quis ac sapien. Ut quis ornare ligula. Nullam a sapien eget arcu mattis aliquam. Quisque dapibus leo vel lacus rutrum sollicitudin.</p>
</div>
</div>
<div class="card">
<div class="image"
style="background-image: url('http://lorempixel.com/150/150/cats/');"></div>
<div class="text">
<h1>Baz</h1>
<p>Nullam eu urna dictum, gravida augue nec, dignissim enim. Duis sit amet elit quis mauris consectetur rhoncus et a ipsum. Fusce vel sagittis nulla, et imperdiet quam.</p>
</div>
</div>
You need to change your HTML and CSS to make it work properly.
<div class="background">
<div class="image" style="background-image: url('https://zero.eu/content/uploads/2017/01/Ryley_Walker-730x490.jpg');">
</div>
<div class="text">
<p>test test test</p>
</div>
</div>
then your CSS should look like this:
.background {
width: 360px;
height: 200px;
position: relative;
}
.image {
background-size: cover; /* that will keep the image in original ratio */
background-position: center center;
height: inherit;
}
.text {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 25%;
}
That will make an image to fully cover the background space and then the .text will be an overlay on the image. Actually, you could even skip the .image div, add background and the CSS to the .background div and it will work as well.
The example you provided features something different than your code is suggesting. If you want to achieve the look from example, then:
.background {
width: 360px;
height: 200px;
position: relative;
background: #fff;
}
.image {
background-size: cover; /* that will keep the image in original ratio */
background-position: center center;
position: relative;
}
.image:before {
content: "";
display: block;
padding-top: 60%; /* that will make a fixed ratio of you image box, even if you'll scale the background boc /*
}
.text {
/* actually it doesn't need styling in that case */
}
.background's parent {
display: flex; /* to make the blocks even in height without setting that as a fixed value */
}
Your code and the example you provided are doing different things. In order to get the effect of your example, you need more than one "card" (image and text together).
You can use display: flex on the .background div so that all the cards are the same height. Then you can add some margin to the cards so they are separated a little.
.background {
display: flex;
background: cyan;
}
.card {
width: 360px;
background: white;
margin: 10px;
}
.text {
padding: 0 5px;
}
.text p {
width:100%;
overflow: hidden;
}
<div class="background">
<div class="card">
<img src="https://zero.eu/content/uploads/2017/01/Ryley_Walker-730x490.jpg" width="360" height="200" class="wp-image-156 hoverZoomLink" alt="Willie Peyote Live"/>
<div class="text">
<p>test test test</p>
</div>
</div>
<div class="card">
<img src="https://zero.eu/content/uploads/2017/01/Ryley_Walker-730x490.jpg" width="360" height="200" class="wp-image-156 hoverZoomLink" alt="Willie Peyote Live"/>
<div class="text">
<p>another test</p>
</div>
</div>
<div class="card">
<img src="https://zero.eu/content/uploads/2017/01/Ryley_Walker-730x490.jpg" width="360" height="200" class="wp-image-156 hoverZoomLink" alt="Willie Peyote Live"/>
<div class="text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque hendrerit, massa sed tristique lacinia, mauris lectus ultricies ipsum, vitae lobortis lectus arcu quis nisl. Etiam pulvinar porttitor mi, at aliquet quam mattis non.</p>
</div>
</div>
</div>
I am trying to put an image as the background and would like it to align to the right, but not closely align to. Something like margin-right:10px. Is it possible to do that in pure css, without explicitly adding a margin to the image?
I had several attempts, but all failed...
http://jsfiddle.net/cA7Un/1/
Thanks in advance!
You could use a percentage, but this is only good if you know the width of the container will stay the same:
background-position: 95% center;
Otherwise, you could add 10 pixels of whitespace to the right of your image in an image editor like Photoshop.
To use the example you put on jsfiddle:
I declared the following extra style:
.rss
{
background-image: url('http://tipabsorb.com/index/wp-content/plugins/category-specific-rss-feed-menu/rss_small_icon.png');
background-repeat: no-repeat;
float: right;
width: 16px;
min-width: 16px;
max-width: 16px;
height: 16px;
min-height: 16px;
max-height: 16px;
margin: 10px;
}
This uses the same image, but adds an extra div to your your markup. This method gives you the image as a background image, and then with the margin you can position it as far from which ever side you want (by also changing the float if you want it on left hand side).
<div class='test' style='width: 300px; height: 100%'>
<div class="rss">
</div>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>
The positioning of the "rss" div before you normal markup is important as this affects the flow. Could also do it by positioning the div absolutely with a relative parent.
Finally I deleted the background from the ".test" class, as it has now been moved to the "rss" class.
I hope this helps.