I have inserted an image in the background in my drupal 7 portal. And the css for it is ...
code :
* {
box-sizing: border-box;
text-align: center;
background-image:
url
('https://xx.xxx.xx.xxx/devuser/sites/all/BackgroundWallpapersforPortal/blue
image.jpg') !important;
background-color:none;
}
However, with this my image looks like this -
I don't want my background image to overlap the blocks. I have visited few websites, their background image doesn't overlap every new statement / every new entity. it stays embed to background. Please help.
I want to Achieve this - where the blocks are also visible and there is a background image also.
You need to set the background only to the specific elements you want it on, not everything. For example have a class for your menu items called "navigation" and set the CSS like this:
.navigation{
background-image: url('https://xx.xxx.xx.xxx/devuser/sites/all/BackgroundWallpapersforPortal/blue
image.jpg') !important;
}
Related
Scenario :
I have a Wordpress site which has an old theme and doesn't allow me to change the header image.
As a workaround on a page where I want a different image, I have
hidden the header image using CSS and replaced it with a background
image, which works fine and is responsive.
Todo :
However I needed to set a height for the area in order to make a space for the bg image to show up at full size (which I have done using a "padding-top")
which causes a large space underneath the background image whenever
the window is resized down, or on phones.
Is there a way to make the
space underneath the image collapse down as the image also collapses
down?
URL: http://www.annareynolds.org/lovehobart/
My Custom CSS:
.singular-page-691 #header img {
display:none;
}
.singular-page-691 #branding {
padding-top:390px;
background-image:url(http://www.annareynolds.org/wp-content/uploads/2018/08/love-hobart-crop.jpg);
background-repeat: no-repeat;
background-size: 100%;
background-position:top left;
}
only use padding in %
like:
.singular-page-691 #branding {
padding-top: 40%;}
http://prntscr.com/kj6z3j
I have visited the link you have provided and checked the responsive. I assume that I worked on the right place as your question asked.
You have paddding-top:390px in .singular-page-691 #branding It cause the space you mentioned. You can adjust the value of padding-top in responsive. I tried with padding-top:180px and it seems fine for me.
My blog: http://friendsojpblog.blogspot.com/
The questions below relate to the circled numbers shown on the attached
file.
I would like to eliminate the 'Title and the Description' Header section, as noted with #1, so it looks like the image on the right (as shown with the red arrow).
Because the blog scrolls as more is added, this Header disappears from view.
Since I am using this in an iframe, my plan is to add a stationary Title/Description header image above the iframe.
Other sections in the blog can be deleted within Blogger's layout options, but I can't find a way to eliminate the header. Is there a way to eliminate the Header?
When I removed the background image, I chose a solid color.
In this attachment, the background is a medium gray, and the narrow border is a light gray.
I want the Background to be white, transparent or preferably eliminated completely, but when I chose white or transparent from Settings, the color of the narrow border turns white.
Is there some way to set the Background color and still maintain the light
gray narrow border? Or better yet, eliminate it completely?
The 'box' containing the Archive has a dark gray background.
This makes it hard to read the text, no matter what text color I choose.
Is there some way to change the background color of this box?
I have the width of the blog set to the minimum of 500 pixels.
I would like to make it somewhat narrower, but I cannot find any way to do this.
Is it possible to make it narrower?
Screenshot of my Blogger:
************
Update: 7/7/2016
Dani:
Here is the CSS code I added. It is the only CSS code for The Park Blog.
.region-inner .header-inner {
display: none;
}
body {
background: #ffffff; /* White. Confused by your wording here - should be right. */
}
.content-inner {
background: #DCDCDC; /* Light Gray. You can change it to whatever you wish. */
}
.footer-outer {
background: #33CC33; /* Green. You can change it to whatever you wish. */
}
body {
min-width: 300px; /* Now it's 400px. change the "400"s you see to the number you wish. */
}
.content-outer, .content-fauxcolumn-outer, .region-inner {
min-width: 300px;
max-width: 300px;
_width: 300px;
}
You added a 1B to your previous answer. All your steps seemed to work, and changes appear saved. However, after step 7, when I view my blog, nothing has changed. When I then recheck the steps, ‘false’ has been replaced with ‘true’, and the Header element is back. I tried this several times, and the results were always the same. Did I miss a step?
Blog min-width. It does not work for me, unless I coded it wrong. Viewing the Page Source, lines 487-494, shows a ‘template-skin-1’, with a min-width: 500px, which appears to override the CSS code I added. I cannot find a way to change this ‘template-skin-1’ code.
Update: 7/9/2016
Dani:
Could not get changes suggested for eliminating header to work. Will try again later.
The width changes do work. For a stand alone blogger, only had to add !important to two lines. Also, only the max-width: has to have pix >0, but both lines have to have !important. See new code below.
body {
min-width: 00px; /* Now it's 400px. change the "400"s you see to the number you wish. */
}
.content-outer, .content-fauxcolumn-outer, .region-inner {
min-width: 00px!important;
max-width: 400px!important;
_width: 00px;
}
To place the Blogger correctly in an iframe, this line must also be modified as follows.
min-width: 400px!important; /* Now it's 400px. change the "400"s you see to the number you wish. */
Harry
1. Hide title and description
.region-inner.header-inner {
display: none;
}
1B. Remove Header completely:
Go to your HTML template, press "Ctrl-F" to open your browser's search box and paste the following code snippet in it:
widget id='Header1' locked='true'
Your browser should now automatically locate the section of your blog's HTML code that contains that snippet.
Replace "true" with "false" to unlock the header and click on "Save Template."
By default Blogger prevents users from being able to remove the blog title element.
Select "Close."
Select "Layout" from the left column and click "Edit" under the Header element.
Click "Remove" at the bottom of the window and select "OK."
Save your new template by clicking on "Save Arrangement."
2. Remove background
body {
background: #ffffff; /* Confused by your wording here - should be right. */
}
Then, to choose background of inner "box":
.content-inner {
background: #ff0000; /* Red. You can change it to whatever you wish. */
}
3. Archive box color
.footer-outer {
background: #ff0000; /* Red. You can change it to whatever you wish. */
}
4. Blog min-width
body {
min-width: 400px !important; /* Now it's 400px. change the "400"s you see to the number you wish. */
}
.content-outer, .content-fauxcolumn-outer, .region-inner {
min-width: 400px !important;
max-width: 400px !important;
_width: 400px !important;
}
5. Result
(Random colors).
Title and description are hidden.
Background is gone.
Archive box color is chosen.
Blog min-width changed.
Update (July 8):
‘false’ has been replaced with ‘true’:
Backup your code, and try removing that line of code from your HTML template, saving, and checking blog again.
Blog min-width: add !important right before the ; of the lines stating the wanted width, in your custom CSS (see edited question).
Note: this company customizes Blogs. And for full disclosure I'm affiliated with it: alldani.com
I am trying to create a hover over image from a single split PNG
How do I enable it so when the image is not hovered over, the top image will view, but when they hover over, the bottom one will show.
The technique you are asking for is called "CSS-Sprites". Here's a tutorial
It uses the background-position style. For the default state of your element, just set the image as background. Note that you need a fixed height (half the height of your sprite) to hide the second part of the image. You also need a width, because your button will contain no content, just a background. For the hover state, use a negative background-position:
.button-foo{
display: block;
height: 29px;
width: 110px;
background: url("http://i.imgur.com/sJu5vvo.png") no-repeat scroll left top transparent;
}
.button-foo:hover{
background-position: 0 -29px;
}
This means the image is moved up so the top icon in there is above the visible area of your button.
Try to make sprites there is many applications out there. Google Css sprites generator.
Or try this one its free http://csssprites.com. Then its just simple css or jquery if u want any effects.
I am using blogger and recently inserted this cc code in to the advanced section of the template designer to input a background image
body {
background: url(http://img854.imageshack.us/img854/9854/ied6.jpg) no-repeat;
background-attachment:fixed;
background-color: none;
}
.body-fauxcolumn-outer div {
background: none !important;
}
The problem is that when the browser window is resized the background stays the same but all the widgets/elements on the page resize along with the window.
See www.ashlylondon.blogspot.com
I need the background to resize along with the widgets so that they stay in the white area on the background image.
You are relying on background resizing so much that your layout won't work without it. That's not ideal. The typical approach to a situation like this would be:
Have a background image that covers the entire screen
Give the <div> element that contains the actual content a background-color: white property.
You can still use background-size to scale your background image to the screen size, but it no longer is necessary for the layout to work.
this woul make sure your content is always readable no matter what; it'll work where background-size won't, e.g. in older browsers and some mobile devices.
add this to your css
body{background-size:100%;}
try this
add in body class background-size:cover;
http://jsfiddle.net/pyFbF/3/
body {
background: url(http://img854.imageshack.us/img854/9854/ied6.jpg) no-repeat;
background-attachment:fixed;
background-color: none;
background-size:cover;
}
.body-fauxcolumn-outer div {
background: none !important;
}
I am having a problem in this page:
xxx/printers/monochrome-laser-printers.html
I see the left column layered navigation is the red I want, but at the bottom some part is pink.
I changed a css class but it didnt change everything. I am not a very expert when detecting what css class I need to change.
I also need to change the Add to Cart button from pink background to the same red.
Any idea?
The bottom part is pink because you're referencing this file as your background: http://www.theprinterdepot.net/skin/frontend/default/MAG060062/images/bot3.jpg
.block-layered-nav .block-content {
background: url(../images/bot3.jpg) no-repeat bottom center;
background-color: #C9271F;
}
And your Add Cart button does the same:
button.button span {
background: transparent url(../images/bkg_btn.png) 0 0 no-repeat;
}
So you need to change your background images.
Use F12 in your browser to see the CSS rules applied to those elements. That should make it all clear.