I was trying to set a background image in a joomla template in header position, I modified the file template.css and it displayed the background image but not correctly, I could see only the a part on the left and the right of the new backgournd image and the rest is hidden (the white background covered it), I dont know what I did wrong:
Here is the template URL link:
http://vitadorotest.hhc-netzwerk.de/
Here is my CSS coding part :
body.font-size-is-default {
font-size: 13px;
line-height:19px;
color:#8f8f8f;
font-family:Arial, Helvetica, sans-serif;
background:url(../images/background.jpg) 50% 0 no-repeat #fff !important;
height: 95px;
margin: 0 auto;
width: 1087px;
}
this is the real problem,,
white_tail.gif is a while image that cover the the defined id with while background.
#rt-top,
#rt-header,
#rt-menu,
#rt-showcase,
#rt-feature,
#rt-utility,
#rt-breadcrumbs,
#rt-maintop,
#rt-main,
#rt-mainbottom{
background:url(../images/white_tail.gif) 50% 0 repeat-y;
}
just comment it like
/*background:url(../images/white_tail.gif) 50% 0 repeat-y;*/
and see the result.
I added some backgrounds using the added tag on the article home page of http://colorta.com & its working.
<div style="background-image: url(images/banners/myimage.jpg); ">
Related
I am trying to modify a woocommerce website and I have very little HTML/CSS training. Most of what I've learned has come from trial and error, some online tutorials, playing around with the developer console in Chrome, etc....
I'm trying to add an image border to the top of a page header right before an area called tg-container. I was able to put one below it, using an existing class, whose info I didn't need to see. Can it be done with the Additional CSS interface built into the theme or do I have to go into the style.css and html to create the boarder? I know the benefit of the Additional CSS interface is having no need to edit the theme files directly whenever the theme is updated.
Bypass Page
Example Page with border - accessible only after bypass page is visited
IMAGE: Example page with Chrome Developer Console open and showing code for area
-------------------- Further Experimentation-------------------------
I created a child theme and am trying to add it that way, but I am missing something (because I'm not a coder), I was able to create the area for the image, but the image isn't showing up. I've tried adding it in the child theme and in the parent theme (editing style.css and page.php).
In the page.php of the child (and the parent) (after the following)
<div class="page-header clearfix">
<div class="tg-container">
I added
<h3 class="title-border"> </h3>
I've tried this in the style.css of the child:
/*Add Wycinanki Borders*/
.title-border {
background-image: url("https://store.dolina.org/wp-content/uploads/2020/08/wall-murals-floral-polish-folk-art-pattern-in-square-wycinanki.jpg-e1596302126833.jpg");
background-repeat: repeat-x;
font-weight: 600;
color: #3b3b3b;
font-size: 14px;
line-height: 30px;
margin: 5px 0;
}
I've tried this in the style.css of the child:
/*Add Wycinanki Borders*/
.page-header .title-border {
background-image: url("https://store.dolina.org/wp-content/uploads/2020/08/wall-murals-floral-polish-folk-art-pattern-in-square-wycinanki.jpg-e1596302126833.jpg");
background-repeat: repeat-x;
font-weight: 600;
color: #3b3b3b;
font-size: 14px;
line-height: 30px;
margin: 5px 0;
}
I've tried this in the style.css of the parent:
.page-header .title-border {
background-image: url("https://store.dolina.org/wp-content/uploads/2020/08/wall-murals-floral-polish-folk-art-pattern-in-square-wycinanki.jpg-e1596302126833.jpg");
background-repeat: repeat-x;
font-weight: 600;
color: #3b3b3b;
font-size: 14px;
line-height: 30px;
margin: 5px 0; }
Again, it has created the space for the image, but the image isn't showing up. I copied the other attributes from the "entry-sub-title", where I was able to put the image successfully, thinking that they would be styled the same way.
Thanks for any insight and helping me learn what I'm doing, hahaha.
Ok, I got it figured out. I added <div class="title-border-top"> </div> above the page title (and actually added <div class="title-border-bottom"> </div> below for future modification.
I then added the following in the Additional CSS:
.page-header .title-border-top{
background-image: url("https://store.dolina.org/wp-content/uploads/2020/08/wall-murals-floral-polish-folk-art-pattern-in-square-wycinanki.jpg-e1596302126833.jpg");
background-repeat: repeat-x;
height: 30px;
margin: 10px;
}
It is working and I hide the entry-sub-title I had taken over for the border to begin with. Now I have to figure out which page templates WP is pulling for all the main pages, so I can add the html to them.
How can i add a image background to my website?
body {
margin: 0;
background: url(background.png);
background-size: 1440px 800px;
background-repeat:no-repeatdisplay: compact;
font: 13px/18px "Helvetica Neue", Helvetica, Arial, sans-serif;
I did that much but nothing shows up on my page. I'm a CSS beginner.
Updated:
body {
margin: 0;
background-image: url(.../img/background.jpg);
background-size: 1440px 800px;
background-repeat:no-repeat;
display: compact;
font: 13px/18px "Helvetica Neue", Helvetica, Arial, sans-serif;
Put the background url in quotes.
It should be background: url('background.png');
See here for working demo.
You also have an issue with the background-repeat line missing a semicolon in between two statements. If your background is really tiny you won't see it because of that issue.
Just to update on the solution, among the other issues, the background file was being refrenced with .../background.jpg when it should have been ../background.jpg (2 dots, not 3).
isn't the problem the following line is incorrect as the statement for background-repeat isn't closed before the next statement for display...
background-repeat:no-repeatdisplay: compact;
Shouldn't this be
background-repeat:no-repeat;
display: compact;
adding or removing quotes (in my experience) makes no difference if the URL is correct. Is the path to the image correct? If you give a relative path to a resource in a CSS it's relative to the CSS file, not the file including the CSS.
Is your image on the same folder/directory as your css file? If so, your image url is correct. Otherwise, it's not.
If by any chance your folder structure is like so...
webpage
-index.html
-css
- - style.css
- images
- - background.png
then to reference the image on your css file you should use the following path:
../images/background.png
So that would be background: url('../images/background.png');
The logic is simple: Go up one folder by typing "../" (as many times as you need). Go down one folder by specifying the folder you wish to go down to.
Adding background image on html, body or a wrapper element to achieve background image will cause problems with padding. Check this ticket https://github.com/twitter/bootstrap/issues/3169 on github. ShaunR's comment and also one of the creators response to this. The given solution in created ticket doesn't solve the problem, but it at least gets things going if you aren't using responsive features.
Assuming that you are using container without responsive features, and have a width of 960px, and want to achieve 10px padding, you set:
.container {
min-width: 940px;
padding: 10px;
}
If you add the following you can set the background colour or image
(your css)
html {
background-image: url('http://yoursite/i/tile.jpg');
background-repeat: repeat;
}
.body {
background-color: transparent;
}
This is because BS applies a css rule for background colour and also for the .container class.
And if you can't repeat the background image (for esthetic reasons),
then this handy JQuery plugin will stretch the background image to
fit the window.
Backstretch
http://srobbin.com/jquery-plugins/backstretch/
Works great...
~Cheers!
body {
background-image: url(your image link);
background-position: center center;
background-repeat: no-repeat;
background-attachment:fixed;
background-size: cover;
background-color: #464646;
}
For more modularity and in case you have many background images that you want to incorporate wherever you want you can for each image create a class :
.background-image1
{
background: url(image1.jpg);
}
.background-image2
{
background: url(image2.jpg);
}
and then insert the image wherever you want by adding a div
<div class='background-image1'>
<div class="page-header text-center", style='margin: 20px 0 0px;'>
<h1>blabaaboabaon</h1>
</div>
</div>
The problem can also be the ordering of your style sheet imports.
I had to move my custom style sheet import below the bootstrap import.
I’ve been asked to create a CSS (non-HTML5) based site that has a filled div with a cutout that shows an image underneath it.
There are additional overlays and other images which makes using static images a pain. Plus, I suspect that I am going to need to be able to scale the background as the browser window changes size.
I realize that I can create an image of the GROW text and simply place it on top of the background image, but I would rather see if this effect can be accomplished “for real.”
This needs to work in IE8, 9, and FF 4. I can fallback to another effect for older browsers.
Any suggestions?
That affect can be achieved using CSS 3 image masking. However, at the moment, only webkit supports the property. I would implement something like this, then use a fallback for other browsers until everybody catches up to speed.
As a side note:You can also increase the CSS adoption be using ChromeFrame, or something similar
An Example from that link:
SVG images can be used as masks. For example, a partially transparent
circle can be applied as a mask like so:
<img src="kate.png" style="-webkit-mask-image: url(circle.svg)">
I ended up using two images without any holes or transparency. It's a hack but works in all browsers.
html5 or something like a gpd as php gui. But html5 doesnt work with ie8 or before, at least if the client doesnt have the chrome frame of google inc.
If you can play with mix-blend-mode property, there is simple solution that work on all modern browsers.
http://codepen.io/sajijohn/pen/OXEgkj
HTML
<h1>SUPER-FLY</h1>
CSS
#import url(https://fonts.googleapis.com/css?family=Raleway:900);
*{
margin: 0 0 0 0;
padding: 0 0 0 0;
}
html, body {
height: 100%;
width: 100%;
}
body {
background: url(http://unsplash.it/3200/1600?image=973) no-repeat no-repeat center center;
background-size: cover;
}
h1 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-family: raleway, sans-serif;
font-size: 80px;
line-height: 60px;
text-align: center;
padding: 20px;
/*/////////MAGIC//HERE////////*/
background: #fff;
color: #000;
mix-blend-mode: color-dodge;
/*////////////////////////////*/
}
https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode
I am trying to get rid of the thin border that appears for every image in Chrome & IE9.
I have this CSS:
outline: none;
border: none;
Using jQuery, I also added a border=0 attribute on every image tag. But the border as shown in the image still appears. Any solution?
body {
font: 10px "segoe ui",Verdana,Arial,sans-serif, "Trebuchet MS", "Lucida Grande", Lucida, sans-serif;
}
img, a img {
outline: none;
border: none;
}
.icon {
width: 16px;
height: 16px;
text-indent: -99999px;
overflow: hidden;
background-repeat: no-repeat;
background-position: -48px -144px;
background-image: url(theme/images/ui-icons_0078ae_256x240.png);
margin-right: 2px;
display: inline-block;
position: relative;
top: 3px;
}
<h1>Dashboard <img class="icon" border="0"></h1>
See attached screenshot:
It's a Chrome bug, ignoring the "border:none;" style.
Let's say you have an image "download-button-102x86.png" which is 102x86 pixels in size. In most browsers, you would reserve that size for its width and height, but Chrome just paints a border there, no matter what you do.
So you trick Chrome into thinking that there is nothing there - size of 0px by 0px, but with exactly the right amount of "padding" to allow for the button. Here is a CSS id block that I am using to accomplish this...
#dlbutn {
display:block;
width:0px;
height:0px;
outline:none;
padding:43px 51px 43px 51px;
margin:0 auto 5px auto;
background-image:url(/images/download-button-102x86.png);
background-repeat:no-repeat;
}
Voila! Works everywhere and gets rid of the outline/border in Chrome.
Instead of border: none; or border: 0; in your CSS, you should have:
border-style: none;
You could also put this in the image tag like so:
<img src="blah" style="border-style: none;">
Either will work unless the image has no src. The above is for those nasty link borders that show up in some browsers where borders refuse to play nice. The thin border that appears when there is no src is because chrome is showing that in fact no image exists in the space that you defined. If you are having this issue try one of the following:
Use a <div> instead of an <img> element (effectively creating an element with a background image is all you are doing anyway, the <img> tag really isn't being used)
If you want/need an <img> tag use Randy King's solution below
Define an image src
For anyone who wants to get rid of the border when the src is empty or there is no src just use this style:
IMG[src=''], IMG:not([src]) {opacity:0;}
It will hide the IMG tag completely until you add a src
Add attribute border="0" in the img tag
If u didn't define a src or the src attribute is empty in a img tag most browsers will create a border. To fix this use transparent image as src:
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAMAAAAoyzS7AAAAA1BMVEX///+nxBvIAAAAAXRSTlMAQObYZgAAAAlwSFlzAAALEgAACxIB0t1+/AAAAApJREFUeJxjYAAAAAIAAUivpHEAAAAASUVORK5CYII=" border="0">
If you are trying to fix the Chrome Bug on loading images, but you ALSO want your placeholder image to load use (with Lazy Loading images, for example) use can do this trick:
.container { overflow: hidden; height: 200px; width: 200px }
.container img { width: 100%; height: 100% }
.container img[src=''],
.container img:not([src]) {
width: 102%;
height: 102%;
margin: -1%;
}
This will make the border be hidden in the container's overflow and you won't see it.
Turn this:
Into this:
I liked Randy King's solution in that chrome ignores the "border:none" styling, but its a bit complex to understand and it doesn't work in ie6 and older browsers. Taking his example, you can do this:
css:
ins.noborder
{
display:block;
width:102px;
height:86px;
background-image:url(/images/download-button-102x86.png);
background-repeat:no-repeat;
}
html
<ins class="noborder"></ins>
Make sure when you use the ins tag to close it off with a "" or else the formatting will look funky.
In your img src tag, add a border="0", for example, <img src="img.jpg" border="0"> as per explained by #Amareswar above
using border="0" is an affective way, but you will need to add this attribute for each image.
i used the following jQuery to add this attribute for each image as i hate this outlines and borders around images.
$(document).ready(function () {
$('img').each(function () {
$(this).attr("border", "0");
});
});
inline css
<img src="logo.png" style="border-style: none"/>
You can remove the border by setting text-indent to a very big number, but the alt of the image also be gone.
Try this
img:not([src]) {
text-indent: 99999px !important;
}
I had a similar problem when displaying a .png-image in a div-tag. A thin (1 px I think) black line was rendered on the side of the image. To fix it, I had to add the following CSS style: box-shadow: none;
same as what #aaron-coding and #randy-king had - but just a more generic one to hide image border before they are loaded (i.e. with lazy-load.js or something
(apparently I can't do a code block in my original comment)
.lazy-load-borderFix {
display: block;
width: 1px !important;
height: 1px !important;
outline: none;
padding: 0px;
margin: -4px;
background-image:none !important;
background-repeat:no-repeat;
}
I fix it using padding style:
#picture {
background: url("../images/image.png") no-repeat;
background-size: 100%;
}
.icon {
height: 30px;
width: 30px;
padding: 15px;
}
The border is disappearing, while you are increasing padding value. Find your own value.
it worked for me. It took days which made me crazy.
img.logo
{
display:block;
width:100%;
height:0px;
outline:none;
padding:43px 51px 43px 51px;
margin:0 auto 5px auto;
}
the solution is to set the outline style to none (i.e.) outline:none, it's work with Me
First create an image type PNG transparent with photoshop in mini size.
Then in your class please add:
content:url("url of your blank png");
That happens because you are using an img tag with no src attribute. The solution is puting the image into a div. Something like that:
<style>
div#uno{
display:block;
width: 351px;
height: 500px;
background: url(especificaciones1.png) no-repeat;
}
div#dos{
display:block;
width: 612px;
height: 500px;
background: url(especificaciones2.png) no-repeat;
}
</style>
<div class="especificaciones">
<div id="uno" class="imag1"></div>
<div id="dos" class="imag2"></div>
</div>
i'm making a splash image div that changes the background with different css class, here's rules i defined:
#splash {
height: 130px;
}
#splash.homepage {
background: #F7EECF url("images/splash_home.png") no-repeat 0 0 scroll;
}
#splash.projectspage {
background: #F7EECF url("images/splash_projects.png") no-repeat 0 0 scroll;
}
this works fine in firefox and chrome, but the background somehow doesn't show up in ie 6. The weird thing is, it works for the homepage class but not the projectspage class. so ie 6 seems to interpret these almost identical rule differently. i tried clear the cache, didn't help. i'm quite new to css and ie 6 hacks, so am i missing anythings here?
also another problem that's slightly related to this, it seems it doesn't work in firefox when there is space before the class, like "#splash .homepage", but somehow i see other people's websites using the css with a space. what could be the problem?
update:
i tried to reverse the order of the #splash.homepage and #splash.projectspage, then now projectspage works but not the homepage. It seems whatever is immediately followed by #splash is used.
here are some relevant css & htmls:
#splash {
height: 130px;
}
#splash.projectspage { background: #F7EECF url('images/splash_projects.png') no-repeat 0 0 scroll; }
#splash.homepage { background: #F7EECF url('images/splash_home.png') no-repeat 0 0 scroll; }
#splashtext {
padding: 53px;
height: 40px;
width: 450px;
}
#splashtext h2 {
color: #FFFFFF;
font-family: Georgia, "Times New Roman", serif;
font-size: 20px;
font-weight: normal;
font-style: italic;
}
#splashtext p {
color: #FFFFAA;
font-family: Calibri, Arial, san-serif;
font-size: 14px;
font-weight: normal;
margin-top: 10px;
font-style: italic;
}
<!-- splash, this one does not show -->
<div id="splash" class="homepage">
<div id="splashtext">
<h2>some header</h2>
<p>some description</p>
</div>
</div>
<!-- splash, this one shows -->
<div id="splash" class="projectspage">
<div id="splashtext">
<h2>some other header</h2>
<p>some other description</p>
</div>
</div>
IE6 does not support multiple combined selectors to select elements (#id.class or .class.class, etc). IE6 will ONLY recognize the last class/ID in your chain.
Details and example
However, in this case, as long as you only have .homepage and .projectspage on one element on the page, the background image should be showing up on the correct element.
I noticed that you are probably using .homepage and .projectspage to differentiate between two PAGES and the same ELEMENT on those different pages. A good practice is to put the class on the <body> element so you can use it to differentiate each page and their descendants.
<body class="homepage">
<div id="splash">
Then your CSS would be:
body.homepage div#splash { blah }
body.projectspage div#splash { blah }
Added benefit: you can now target any elements on a per page basis, not just the ones that you add ".homepage" or ".projectspage" to.
It's possible you're having an issue with the .png image files. IE6 cannot handle the transparency layer that is part of .png images, it simply renders any pixel with a transparent marker as a grey background.
As for the second part of your question, #splash.background is a significantly different rule than #splash .background. The first one (no space) refers to the element with id splash that also has a background class. The second rule (with a space) refers to any element of class background that is a child of the element with id splash. Subtle, but important difference.
Try taking out the quotes around your URLs in the background specifiers, or changing them to single quotes.
Why are you worried about ie6? Anyway it works in ie7 and ie8.
Are you sure that is not a problem with png? Try with a jpg or gif image.
I would bet that the problem is specifically to do with the IE6 misshandling of .pngs
To test, try replacing these graphics with a gif or jpg and check to see if the selectors are working correctly.
Once you've identified that it is a problem with pngs try using the Supersleight jQuery plugin.
I think using min-height property will sometimes work.
Try the below code.
#splash {
min-height:130px; /* first */
height:auto !important; /* second */
height: 130px; /* third */
}
#splash.homepage {
background: #F7EECF url("images/splash_home.png") no-repeat 0 0 scroll;
}
#splash.projectspage {
background: #F7EECF url("images/splash_projects.png") no-repeat 0 0 scroll;
}
Note: Please use the same order of css in #splash selector.
(I guess your projectspage is under a sub-directory of home-page?)
Try using absolute paths to each image in the CSS (eg. url("/images/splash_projects.png")) - it chould be that IE6 resolves images relative to the containing page instead of the CSS file (depends whether your CSS is inline or in an external file I suppose.)
I've got the same problem, and it's not PNGs.
e.g.
column2menu li { border-bottom : 1px solid;}
column2menu li.goats { border-bottom-color : brown;}
...works in IE6, but...
td#menu { background-repeat:no-repeat;
background-position:bottom right;}
td#menu.goats { background-image :
url(../images/goats.jpg);}
...doesn't.
But I found a solution for ie6 that works so far in FF, i.e.:
.tdgoats { background-repeat:no-repeat;
background-position:bottom right;
background-image : url(../images/goats.jpg);}
...so you use:
...and ie6 is happy
Thsi post looks OK where I'm typing it, but the preview in the blue box is a bit odd.
Somehow lines 2 and 3 got <h1>'d