I'm new to WordPress and am using the Astra theme with the standard Gutenberg builder. It would be great to be able to have a text that can be placed over an image like on this website:
The green square image should be placed behind the text:
With the standard Cover block it scales the height of the image too large, see second picture. When using Media and text block, the text can't be placed over the image.
I tried using the Spectra plugin of Astra to get this done, but can't seem to find a way. Another idea was to set a fixed height for a Column and place the Cover in there. But the object Column only has Minimal height and not Fixed height.
Any help would be greatly appreciated.
By adding an additional CSS class to the paragraph within the Cover block, you can use clip-path in CSS to draw the required shape to fit the text content; without the need for a background image, eg:
style.css / style-editor.css
.green-background {
position:relative;
width: fit-content; /* to only cover the text */
float: left; /* default is centered in the Cover block */
z-index:0;
}
.green-background::before {
content:"";
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
clip-path: polygon(10% 0%, 100% 0, 90% 100%, 0% 100%); /* background rectangle shape */
background-color:rgb(115,213, 54); /* green color */
z-index:-1;
}
Example Cover block with background image, color overlay with Additional CSS green-background applied only to Paragraph:
NB. The caveat to this method is that the Paragraph block can still override/apply its own text and background color: if a paragraph background color is picked it will appear over the top of the green background shape. If this is a concern, there are other steps you can take like extending the Cover block to remove the option.
Related
I am fairly new to code and taking baby steps with an issue I am having: swapping out background images. I made very slight adjustments to the three images that make up the background of the site. One was a main background image (in a bodywrap container) that loaded just fine. The next was a wrapper image with a repeat-y attribute that is no longer taking since the swap - the image shows up, but is just showing up as a single white line, while it is meant to 'fill' the rest of the page. Finally, the footer image is not showing up at all.
I thought that swapping out the current images with ones that were only slightly adjusted in photoshop (all I did was remove drop-shadows and red margins) would be an easy task - my mistake!
I tried adjusting the code and got nowhere, so I've copied the original code. I believe that the problem lies within my CSS:
#wrapper, footer, .pagetop, .copyright {
width:942px;
margin:0 auto;
padding:0px 37px 0px 37px;
overflow:hidden;
clear:both;
}
.bodywrap {
background: url(images/background.png) 49.9% 0% repeat-x;
width:1016px;
margin:auto;
overflow:hidden;
}
#wrapper {
background: url(images/wrapper.png) 49% repeat-y;
clear:both;
padding-bottom:25px;
min-height:225px;
}
.footer {
background: url(images/footer.png) no-repeat 51% 0%;
overflow:hidden;
min-height:107px;
font-size:1.2em;
padding-top:17px;
font-family: 'Francois One', sans-serif;
}
Thanks in advance for sharing your expertise!
First thing I see that your background instructions are not consistent. Your no-repeat is before and after your alignment values. I would suggest to try keeping it the same everywhere in your code. when your code gets heavy it can be confusing.
body {
background: #ffffff url("img_tree.png") no-repeat right top;
}
right means align the image on the x axe to the right and
top means align the image on the y axe to the top
Do you understand that your 49.9% values are telling the background image to start repeating at 49% to the left from the edge of the box you as it to be in.
Also your .bodywrap does not have a height. if you only see a small line, this is because your element is only taking up the space the content inside this element is taking. you might have a space or 1 line of code. hard to say without the HTML.
So you need to give the .bodywrap element a min-height or height equal to your image height. The image you provide AS background to an element, does not define that element's height. The <img> tag and an image background don't work the same. an <img> tag will determine its height on its own but you cannot repeat it like a background.
Here you can see more information on background here: http://www.w3schools.com/css/css_background.asp
I would like to make the text content of my div invisible but still display the background image. Is that possible?
In the app, the div's single-character content determines which class is conditionally applied to the div, but the content itself is not what needs to be displayed. I want to display the image associated with the class.
Add color:transparent; to the div CSS. It would make the div have text but text color is transparent with respect to the background.
CSS (with sample image):
#test{
background-image: url('http://static.adzerk.net/Advertisers/12f0cc69cd9742faa9c8ee0f7b0d210e.jpg');
height: 300px;
color: transparent;
}
Demo Fiddle.
I want to set a body background to 30.08% cream and 69.2% gray. I am doing this with a css gradient. Then I what to have all my articles to be `margin-left: 30.08%;' to meet the line of the background (so the background line, created by the gradient is like a ruler). Here is the code
body{
position: relative;
background: -webkit-linear-gradient(left, #faf4f2, #faf4f2 30.08%, #777777 30.08%, #777777);
}
article{
width: 300px;
height: 200px;
background: red;
margin-left:30.08%;
}
This works great, but as you can see in this jsFiddle example, the article does not always align with the gradients line. So depending on the browser width, it looks sloppy in some cases. In the jsFiddle example, you are going to see the problem I have if you resize the window to 652px (but that is not the only point) . Unfortunately this happeness at so many different points that I dont think a media query would do the job.
Is there a way to fix it?
Thanks
You have given your body width and height of 100%
When you give an element a width of 100% in CSS, you’re basically
saying “Make this element’s content area exactly equal to the explicit
width of its container — but only if its container has an explicit width.”
and then you are using
article{
margin-left:30.08%;
}
30.08% of what?
as said above you should use % only if its container (which in this case is a block level element <body>) has an explicit width.
You can read more about it here..
Read it here
and i have changed your code a bit changing the values from % to pixels
body{
background: -webkit-linear-gradient(left, #faf42, #faf42 90px, #777777 90px, #777777);
color: darker(#77777, 10%);
width:300px; height:300px;
}
it seems to be working now. the values are for demonstrational purpose only. change it according to your needs.
Hope it helps.
I basically made a header image for my site and the sides of it have black on it. I want to extend the header so it goes for the width of the user's web browser with black "bars" as if the header extends for their whole browser.
I've tried a few things, but I cant figure this out.
Here's an example of what I have now:
#header {
background: url('img/header.png') no-repeat top center;
height: 131px;
}
#headerbg {
height: 131px;
width:4000px;
background-color:#000;
}
And in the html I just have both in divs and within each other in the html.
Here's a jsFiddle that shows you how to layer the two div's and use background-size property to expand the image so it fits just the same as the background color's width. UPDATE: New jsFiddle above is replaced to include better method for that type of look.
Edit: Here is a different jsFiddle that has places the image inside and centers it, allowing any excess background color from the parent container to show through.
Edit 2: Using the Edit fiddle above, you can apply CSS3/IE gradient effect as shown in this jsFiddle
Status: The solution was to use center center for background-position combined with setting both width and height to 100% for the image used.
I have an image with and array 16x16 of multiple icons. e.g. "http://www.freepbx.org/v3/browser/trunk/assets/css/jquery/vader/images/ui-icons_cd0a0a_256x240.png?rev=1"
Any idea how to choose only one of those icons and set it as a background image using CSS?
What I want to achieve is have an x icon or tick icon to the right of an input text element in to notify the user if what he has given as input is valid or invalid.
Thanks,
Stavros
You would set the height of an element to the height of the icon in that image that you want, and then set the background of that element like so:
span {
background:url(path/to/image) 50px 10px;
height:10px;
width:10px;
}
Where the element used is a span, and the desired icon is at position (50px, 10px). To learn more about positioning backgrounds have a look at: http://www.w3schools.com/cssref/pr_background-position.asp
You can accomplish this with css, something like this:
div#myDiv {
background-image:url('url-to-image');
background-position:50px 50px; /* coordinates of the top left corner of the image portion you want to display */
width:20px; /* Width of image portion */
height:20px; /* Height of image portion */
}