On my index page, I have a background image which is added to the div dynamically by some javascript.The inline style added is the following.
element.style {
background: rgba(0, 0, 0, 0)
url("http://www.myshop.com/wp-content/themes/mytheme/images/media/bg-footer.jpg")
no-repeat scroll 50% -287.5px;
}
I have changed that background image using the following class
.footer-bg{
background: rgba(0, 0, 0, 0)
url("http://www.myshop.com/wp-content/uploads/2014/01/blue-living-room.jpg")
no-repeat scroll 50% -59.5px !important;
margin-top: 20px;
}
I have used !important for overriding the background style loaded by the javascript and it worked.After changing this site is bit slower than earlier.My doubt here is that Will the site load both style or will it completely ignore the first one?
If the site loads both styles and apply the one with !important then it needs some loading time right?
Do these style overriding directly affects site loading speed.Please guide me.
Thanks
If that background add on the same class (.footer-bg) then you can override with below method-
.footer-bg [style]{
background: rgba(0, 0, 0, 0) url("http://www.myshop.com/wp-content/uploads/2014/01/blue-living-room.jpg") !important;
}
Hope it will helps you.
Related
I want to have a color filter on half of my webpage. I tried to obtain this by applying on the whole page a fixed div with a backdrop filter and then cutting the div shape with clip-path.
div {
position: fixed;
width: 500px;
height: 500px;
top: 0;
left: 0;
}
#front {
background-color: rgba(255, 0, 255, 0.5);
clip-path: polygon(50% 0, 100% 0, 100% 100%) !important;
backdrop-filter: invert(100%);
width: 600px;
}
#back {
background-color: rgba(0, 0, 255, 1);
}
<div id="back"></div>
<div id="front"></div>
This code is working well in chrome: the "front" div is placed on the "back" one and applies its backdrop filter to the visible portion of it.
If ran on firefox (v89.0.1), the clip path is cutting the div but the backdrop filter still gets applied on the original (rectangular) shape.
You can also visit this codepen from the two different browsers to see the problem.
how can I combine those two rules to obtain the effect I desire?
You need to enable backdrop-filter first as it is disabled by default in Firefox.
Open a new Firefox tab and type about:config in the address bar. Press Enter.
You should see a warning. Click on the button saying Accept the Risk and Continue. This message is shown because, on this page, all experimental features are present which may produce glitches when enabled and hinder performance, including the backdrop-filter.
Type layout.css.backdrop-filter.enabled in the search bar. You should see the value is set to false. On the extreme right, there is a reversible arrow (or whatever you call it). Click it to change the value to true.
Next, type gfx.webrender.all in the search bar. It should also be false by default. Change it to true similarly.
Done!
I have 2 .png pictures with a transparent background.
I would like to add them to my page, at the moment I use
<div class="thumbnail">
<img src="foo.png">
</div>
but when I open the page (through chrome) the background color is white, and I don't want it white, I want it to be transparent.
I would like not to use CSS, but if there is no other option so I'll do it.
Please note that, if you are not giving any colours for the background, then by default it will be white on most browsers! If you are using chrome, you can do like this:
body {
background: url("transparent1.png") transparent,
url("transparent2.png") transparent;
}
As said in the comment by KittMedia, if you are targetting new browsers, replace transparent with:
body {
background: url("transparent1.png") rgba(0, 0, 0, 0),
url("transparent2.png") rgba(0, 0, 0, 0);
}
This way, you can overlay two images and keep them transparent too. Is this what you are expecting?
I have a website with SVG images, but I have a problem. My site is on an Apache server with my host. My images are displayed very well when my site was on my local server but now it is on my host images no longer appear. I controlled the url is correct. I can access with the url directly on the image, but the images are not displayed on my site.
HTML
<span class="logo">Logo</span>
CSS ;
div.main-content-logo h1#header-logo .logo {
background: url("../img/logos/logo-main.svg") no-repeat scroll 0 0 / 260px auto rgba(0, 0, 0, 0);
color: rgba(0, 0, 0, 0);
text-indent: -999px;
}
div.main-content-logo h1#header-logo .logo {
display: block;
height: 78px;
width: 260px;
}
Can you help me?
Have you specified the MIME type in the .htaccess file? see here: http://www.w3.org/services/svg-server/
Sometimes going from local to server changes the folder structure a bit (has happened to me). Try putting the absolute direction to test it
background: url("http://myexampledomain.com/img/logos/logo-main.svg") no-repeat scroll 0 0 / 260px auto rgba(0, 0, 0, 0);
I want to take the hover effect on the word "Dropdown" on this template (the gray/black box that appears when you put the cursor on it) and put it on the nav menu of this other template (from the same site)
I'm a beginner, I tried a lot of things but I just can't achieve the same effect. I tried copying the #nav code from the first template .css and pasting it on the another template css but it just copies the text, font, color but the hover effect is not there.
Thank you in advance and sorry for the stupid-ish question
The dropdown effect on the first template is achieved using Javascript rather than pure CSS. You'll need to find the .js file in that template which is controlling it. I took a look at the source, which you can do by right clicking on the page and selecting View Source. The dropdowns are being controlled by a jQuery plugin called Dropotron.
https://github.com/n33/jquery.dropotron
If you add this to the new template you wish to use, you can achieve the same effect.
EDIT:
3 things are happening to create the hover effect on the word itself.
Background Color
Curved Corners
Inset White Border to make a slight 3D effect.
These are achieved with three CSS rules:
background
border-radius
box-shadow
The exact CSS is:
border-radius: 6px;
background: none repeat scroll 0% 0% rgba(0, 0, 0, 0.15);
box-shadow: 1px 1px 0px 0px rgba(0, 0, 0, 0.024) inset, 1px 1px 0px 0px rgba(255, 255, 255, 0.024);
The background-color on the new theme's header is white, so you don't need the shadow. You would just insert this into the CSS file:
#nav ul li a {
border-radius:6px;
}
#nav ul li a:hover {
background:rgba(0, 0, 0, 0.15);
}
You can change the color if you want of course.
I have background images for fixed position menu items.
They appear correct on a desktop browser, but they become stretched and only show the center portion of the image when displayed on a mobile browser, and the image appears to be approx 4x original size.
I've attempted setting background-size:cover cover !important; to force the size to fill the container, but that has also had no effect.
I know there are issues with using fixed positioning and the viewport on mobile, but I've tried setting the elements to relative positioning with no effect.
HTML:
head:
<meta name="viewport" content="user-scalable=no, initial-scale=1.0" />
menu:
<ul id="shortcuts" role="complementary" class="children-tooltip tooltip-right lulus">
<li class="current">Home</li>
<li>Events</li>
</ul>
css:
#shortcuts {
display: none;
position: fixed;
z-index: 998;
top: 44px;
left: 10px;
margin: 0;
width: 240px;
list-style-type: none;
padding: 15px 4px 5px 14px;
*padding-bottom: 25px;
border: 1px solid white;
background: #d9d9d9 url(../img/old-browsers/style/bg_shortcuts.png) repeat-x;
-webkit-background-size: 100% 100%;
-moz-background-size: 100% 100%;
-o-background-size: 100% 100%;
background-size: 100% 100%;
background: -webkit-gradient(linear, left top, left bottom, from(white), to(#d9d9d9));
background: -webkit-linear-gradient( white, #d9d9d9 );
background: -moz-linear-gradient( white, #d9d9d9 );
background: -ms-linear-gradient( white, #d9d9d9 );
background: -o-linear-gradient( white, #d9d9d9 );
background: linear-gradient( white, #d9d9d9 );
-webkit-background-clip: padding-box;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-webkit-box-shadow: 0 1px 7px rgba(0, 0, 0, 0.8);
-moz-box-shadow: 0 1px 7px rgba(0, 0, 0, 0.8);
box-shadow: 0 1px 7px rgba(0, 0, 0, 0.8);
}
#shortcuts > li {
width: 70px;
height: 70px;
float: left;
margin: -5px 10px 25px 0;
}
.shortcut-dashboard { margin-left:0px !important; /*padding-bottom:65px; width:70px !important;*/ background-image: url(../img/standard/icons/Home_Icon.png) !important; background-position:center center !important; background-size:cover cover !important; }
.shortcut-agenda { margin-left:0px !important; /*padding-bottom:65px; width:70px !important;*/ background-image: url(../img/standard/icons/Calendar_Icon.png) !important; background-position:center center !important; }
I can't figure out why the background image is getting stretched and only on mobile browsers. This is the only place my background images are behaving badly. Any help would be nice... I'm not opposed to corporal punishment on these misbehaving children!
Quoting from "The Definitive Guide To HTML/XHTML 6th Edition":
"HTML and XHTML documents can wind up in the strangest places these days, such
as on cellular phones. To help the browser figure out the best way to render your documents,
include the media attribute within the tag. The value of this attribute is
the document’s intended medium, although it doesn’t preclude rendering by other
media. The default value is screen (computer display). Other values include tty (text
only), tv (television), projection (theaters), handheld (PDAs and cell phones), print
(ink on paper), braille (tactile devices), embossed (Braille printers), aural (audio;
speech synthesis, for instance), and all (many different types of media).
If you want to explicitly list several types of media, instead of specifying all, use a
quote-enclosed, comma-separated list of media types as the value of the media
attribute. For example:
tells the browser that your document contains CSS both for printing and for computer
displays.
Be careful specifying media, because the browser cannot apply the styles you define
unless the document is being rendered on one of your specified media. Thus, the
browser would not apply our example set of styles designed for media="screen,print"
if the user is, for instance, connected to the Web with a handheld computer.
How do you create different style definitions for different media without creating
multiple copies of your document? The CSS2 standard lets you define media-specific
stylesheets through its extension to the #import at-rule and through the #media atrule,
which we describe in section 8.1.5 later in this chapter."
PS, try to make your code more relative: instead of using 'px', specify the value in percentage.
My bad on this one, folks. I had a CSS file that was overriding the background-size to a predetermined pixel size. I removed this property from the CSS file and all is well.
On a side note, does anyone know of any apps or plugins that allow me to view the CSS of a page from a mobile browser? Something similar to built in desktop browsers' developer toolbar? This would have saved me a lot of headache...