FAQ Database Discussion Community


CSS: How to drill all the underlying layers up to the background?

css,background-image
Is there any way to create div with a style to drill all the underlying layers up to the background? Wherever such DIV is placed, it should provide an eraser effect. Basically, I'm interested in CSS, but would appreciate if you could suggest any method to reach following result. Sample...

Set background width / height within list tag whilst using sprites

css,css3,html-lists,background-image
Ok, I have a situation where I need to display a custom image for the list bullets; obviously you can do this via list-style-image; however I want to use a sprite. So another method I came across was to just put the background on the li itself, however without being...

Changeable background for div

javascript,css,background-image
I need changeable background, here is simple solution: http://jsfiddle.net/mondayguy/nehcvh8x/ var color1='009687', color2='191C26' function updateGradient() { document.getElementById('gradient').style.background = "url('http://jscolor.com/gradient/x"+color1.toUpperCase()+"-378-"+color2.toUpperCase()+".png?tmp') center top repeat-x" } It just uses colorPicker and have pregenerated png's which uses as repeated background image. Problem is that when I use this trick for div with big height the...

white bar now appearing below my animated gradient background

css,background-image
After adding a second row of fancybox galleries there is now a white bar stretching along the bottom of the screen in all browsers (desktop and mobile). What could have caused it? My background is set at height: 100% and was working perfectly until this!! Would love some help! http://studiopowell.net/TEST_gradient.html...

Dotted background overlay effect in CSS

html,css,background-image
I'm trying to achieve the background effect on this website: http://mountaintheme.com/themeforest/mountain/home.html The background pictures seem to be covered in a dotted overlay sort of thing. Is there a way to create this effect with CSS only?...

Background image with opacity

css,background-image,opacity
I've been trying to display a navigation bar in front of a full screen size background image which I want to adjust it's opacity. I am able to display the nav bar and the image correctly until I modify the image's opacity. When I do that, the background image is...

What is the correct way of having an image background that works on all devices?

jquery,html,css,background-image
I'm designing a website that has an image in the background (that should stretch and cover the whole page). This is the CSS I'm using: html, body { margin: 0; padding: 0; min-height:100%; } body { background:url('../img/wide.jpg') center center no-repeat; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-size: 100%;...

Any benefit to loading a single image via background with CSS?

css,image,background-image,httprequest
Ok, obviously if you have a lot if icons you generally load them in via a background image so you can utilise sprites; however, I was just wondering if there is any advantage to loading them in via the background versus loading them via a img tag when it is...

fix a div/button/link to a background image

html,css,background-image
I am having an annoying issue to position an element on top of a background image. Say we have a html as : <html> <head> </head> <body style = "margin: 0 auto;"> <div style="background:url('image.png'); background-size:cover;"> <button>Button </button> </div> </body> </html> The button should be placed at left: 50px; top: 100px;...

How to change terminal background to photo in OS X

osx,terminal,background-image,osascript
In order to help differentiate between terminal windows from a 30k foot view, I'd like to have different background pics for my terminal windows. Every time a terminal window opens, I'd like to set the background to a random pic from a certain folder. I know you can change the...

Making background image not-resizable

html,css,twitter-bootstrap,responsive-design,background-image
I'm using Boostrap and I've set a background image to an empty div using the following markup and CSS: <section id="process"> <div class="container"> <img src="img/production.png" id="processicon" class="center-block"> </div> <!--end container--> <div id="processbg"></div> <div class="container"> <h2 class="text-center">materials and construction</h2> <p class="text-center">The carbon neutral and responsibly sourced bamboo contributes to over 70%...

Fill SVG path element with a background image without tiling or scaling

html,image,svg,background-image
I'd like to do something very much like Fill SVG path element with a background-image except that the solution offered there will tile the image to fill the the entire background area. I don't want that. If the image doesn't fill either the entire height or the entire width, then...

Multiple views in Android [duplicate]

java,android,background-image,android-textview,setcontentview
This question already has an answer here: Adding child views to Relative Layout 2 answers I have a background image: android:background="@drawable/bg"> and a TextView: final TextView theTimer = new TextView(this); If I use setContentView I can only place one of them on the screen. How can I fit them...

Changing the colour of background behind image css

css,background-image,background-color
In CSS I'm using a gif as a background image: background: url(http://*URL of gif*) no-repeat 50% 50%; but depending on screen size I can still slightly see the background behind that image(it is white). How do I change the colour behind that image? I want to change it to be...

(Android Studio) App Background Image Doesn't Fill Screen

android,android-studio,imageview,background-image,fill-parent
I'm new to app programming and require some assistance. I am building a simple app on Android Studio, but my app's background image (I named it "green_background") doesn't entirely fill the screen. I can't provide a screenshot because I don't have 10 reputation on Stack Overflow. Here is my app's...

Set the height according to the image with dynamic height

html,css,background-image,background-size
At the moment, I am using the following code: CSS .photo-medium { background-attachment : scroll; background-color : #222222; background-repeat : no-repeat; background-position : center center; background-size : contain; border-radius : 0; margin : 0 0 30px -10px; width : 100%; } PHP & HTML # VARIABLE $photo_750 = 'images/photos/'.$photo['data_file_name'].'-750.'.$photo['data_file_type']; #...

CSS sprite menu not show correct background

css,menu,background-image
I am new to CSS sprite menus so please bear with me (yes I've looked everywhere for the answer). I'm working on a small/simple mobile site. I have my main menu all worked out on the index page. Now I am on the first of the sub-pages. I just want...

CSS sprites management

css,background-image,css-sprites
I am wondering if there is any good way to manage CSS sprites. For instance, take a look at a sprite that's used by Google in its Play environment: It would seem impossible to me that the devs over at Google don't have a 'system', or even a tool to...

Background image in div not working (video included) [closed]

html,css,css3,background,background-image
I have tried many forums and suggestions, only to fail for the past few days. My CSS works perfectly fine if I use firebug, or third party css live edits, but not working when page loads. The file paths are 100% correct, thus the reason it works live. I have...

css image cut background transparent

css,background-image,transparent
I need get from a CMS the image and use in next section, side by side of promotion text (grey space), but i've no idea how to create the next effect: Like you can see, square starts in top of left side and the go little down until the right...

Increase space between border and background-image

css,border,background-image
I want to increase the distance between the border and the background-image ... I tried to add padding: 20px; but it doesn't work. .Tab1 { background-image: url("http://dl.dg-site.com/wp-content/themes/aeron/images/dl-products-icons5.jpg"); width: 100px; height: 75px; display: block; } .Tab1:hover { border: 1px solid green; } <div class="Tab1"></div> ...

problems with spaces when assigning url values in code-behind background-images in asp.net

asp.net,background-image,code-behind,spaces,datareader
I'm making some kind of musically website where any of paid customers video uploads will appear on the home page of the website. I uploaded the videos and created a thumbnail from video altogether in one upload button, and try to assign two automatically-created divs to the website based on...

background-size transition on hover causes chrome to “shake” background image

css,css3,background-image,transition,background-size
I am trying to achieve an effect I saw recently, where background image zooms on hover. I pretty much did it with example here: https://jsfiddle.net/qyh6nbwt/ but it seems to be very shaky (you will understand what I mean by hovering over it), I'm on osx running latest chrome version, have...

Multiple CSS background-image's on Mobile

ios,css3,background-image
I've created a grid pattern using css background-images as follows: .grid { width:720px; height:720px; background-color: #333333; background-image: linear-gradient(rgba(255,255,255,0.1), 1px, transparent 1px), linear-gradient(rgba(255,255,255,0.5), 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.1), 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.5), 1px, transparent 1px); background-size: 40px 40px, 240px 240px, 40px 40px, 240px 240px; } https://jsfiddle.net/nicholasstephan/47zyx3pq/1/ but while this works...

Set to 100% window height to include fixed div

html,css,background-image
Please see http://jsfiddle.net/muc0mzgt/. The body basically ends before the footer div as the latter is positioned fixed. Problem here is I want to add a page filling background image that would now end where the red line is as it is attached to the body. Setting the body height to...

CSS Background Image not showing up CSS HAML

css,ruby-on-rails-4,background-image,haml
I have a background image url in a stylesheet that I'm trying to render for the header in my index page. The image is located in the assets/images folder. I tried putting in vendor/assets/images and it's not rendering from there either. views/splash/index.html.haml: %section.row.header-bg .row .col-md-6.col-md-offset-1 assets/stylesheets/splash.css.scss: .header-bg{ background-image: url('bg.png'); }...

Fixed background on mobile device

html,css,background-image
I am having trouble setting the background of this page - http://troov.co/team/ (on a mobile device) so that the background image is fixed, and just the content scrolls down. At the moment, the background image scrolls down with the content, meaning that there's a lot of white space and so...

How to set a background image in Scrollviewer in Windows Phone 8.1 app

xaml,windows-phone-8.1,scrollview,background-image
I want to set a Background Image to a Scrollview. The Scrollview is the root view of the app(I mean, all other views are nested to it). Is it possible to set a background image to it? I'm building my app with C# and XAML....

QFrame with background image and otherwise transparent background

c++,qt,background-image,qframe
I am making a desktop carousel app. There I need to show image widgets, which might contain other sub-widgets as well. For that I am using a QFrame with the required image as background. Here is the image I am trying to use: image link. What I want is that...

Multiple screen support Windows Phone 8

c#,button,windows-phone-8,background-image
I used to develop for Android and iOS, and for multiple screen support we use to use mdpi, hdpi, xhdpi. Now I want to develop for Windows Phone, I want to set a background to a button and I don't know how to define image size to support all screen...

Get the background-image url from an existing
and/or add another attribute to background-image

javascript,jquery,css,background-image
I am trying to update an existing background-image with linear-gradient. At the moment my CMS is creating an background-image, but I can't change the opacity with linear gradient. I just want to darken the background-image per CSS. My solution -> Get the url from all background-image div classes (.bg-image) to...

Mimic the css background cover img property in html

jquery,html,background-image,cover
Thanks all for your responses. However, I haven't found any good answer to my question. So let me be more clear. PURPOSE As I'm working on SEO, I need to include images as html elements and mimic all the css attributes. What I currently have I added images within the...

Setting the background in an MVC _Layout.cshtml page

asp.net-mvc,url,razor,background-image
Setting every page's background is rather simple in ASP.Net WebForms where you have access to the Page_Load event in the code-behind of a MasterPage but how is this best done in MVC? After spending several hours researching various alternatives I chose to assign the value to the ViewBag through a...

Insert text in border CSS HTML

css,text,background-image,border
I need to insert text in the upper and lower of an inner border (both centred) which will have a background image behind it. This will be the same on each page. Can I achieve this using CSS? Please see screenshot of what I mean: The border needs to be...

xcode uiimageview background image

ios,uiimageview,background-image
I am relatively new to Obj-C so thanks in advance. I have a UIImageView on the storyboard. I have a Tap Gesture Recognizer over it. When the user taps, the choose/take photo option comes up and the image view is correctly updated with the photo. What I want to do...

Background images flanking the Bootstrap container

twitter-bootstrap,background-image
I want 2 background images, that both hug the Container div on both left and right side, keep in mind im using Bootstrap Framework. I want the images to follow the content, just like https://www.komplett.dk/k/kcf.aspx?tag=weekly1 (They have the Yellow boxes on each side) I want that on my bootstrap template....

CSS - Adding background images in the body of a website not working.

html,css,website,styles,background-image
Here I have some css styles that alter the layout of all webpages for my website, with a wrapper that is 900px wide a header and the main body. So far I've changed the background colour in the body section which works great. However if I add some code to...

Using multiple images to create a scalable control

c#,xaml,user-controls,background-image,scalable
Problem I needed to make controls that used images as backgrounds that could be any width without distorting the images. For example if I used a single image and stretched it the rounded corners of the image would become distorted. Solution The solution, given by Noxivs, was to use a...

Java:Background Image add on JFrame

java,image,swing,background-image
I'm making a gui program everything going right but add background image in frame so i take jpanel private variable.Also i add image in src which is but how to use this jpanel variable to add background image in frame. Code: public class App extends JFrame{ private JPanel panel; private...

Background Image Is Not Responsive AFTER jQuery Sets CSS

jquery,background-image,responsiveness
I have a div element that will contain a different background image based on the size of the browser screen. Here's an example of the CSS that will do the responsive work: div { background-image: url(a.jpg); } @media screen and (min-width: 700px) { div { background-image: url(b.jpg); } } The...

Special Page Background - Static, Tiled

css,html5,static,background-image,tile
Okay lets say I have a cooled tiled background like on this website. http://www.leeslights.com/colors-shapes-sizes-and-prices.html How would I make it so that the image tiles to the browser, but once it has done that it would become static, like the background is one this website. http://www.worshipatthemountaintop.org/...

Positioning a background image in an element with an offset from the bottom

html,css,background-image
Is there a way to set a background to be fixed to the center, and to the bottom, but not flush with the bottom of the element, rather 100px up from the bottom of the element? (Of course the bg image would only be visible with in the div bounds)...

Text on div border with transparent background [duplicate]

html,css,css3,background-image,transparent
This question already has an answer here: How to center the <legend> element - what to use instead of align:center attribute? 7 answers How to put some text on a border div so that text has a transparent background that it matches the image behind? The problem is that...

How can i add an image as background in Chartjs?

background,background-image,chartjs
I am using chart.js lib on a programmable device i need to add an image as background to my chart, if that is not possible how can i change background color to black?. I cannot use Jquery as it is not supported by the Platform. Thank you...

Javascript Changing Random Background Image Issue

javascript,html,ruby-on-rails,ruby-on-rails-4,background-image
I am on Rails 4, and finally got this javascript working. It changes randomly changes the background image every 10 seconds with a fadein fadeout effect. The only issue is every so often, an image will only load halfway... then it will start to flash and and get crazy. It...

LESS: concatenate multiple background rules

less,background-image,mixins,less-mixins
I have a mixin that creates a gradient with vendors' prefixes, and I would like to add this background to a DIV in addition to another background-image. .horizontal(@start-color: #555; @end-color: #333; @start-percent: 0%; @end-percent: 100%) { background:@start-color; background-image: -webkit-linear-gradient(left, @start-color @start-percent, @end-color @end-percent); background-image: -o-linear-gradient(left, @start-color @start-percent, @end-color @end-percent); background-image+:...

Multiple background images in one div, one image after the other

css,css3,background-image
Lets say that I have 2 images, one is 1px*700px and the second is 1px*800px. I want to put those images as a background to one div, so that the div has 1500px height. Is that possible with CSS3? div{ background: url(first_image.jpg) repeat-x, url(second_image.jpg) repeat-x; /* ... */ } I...

CSS make background-image overlay other div

css,background-image
Basically I want the background-image (the logo) to overlay the white div below it, I tried my best using z-indexes etc and Googling but I can't manage to get it fixed. I know the question is a duplicate but Im desperate since other solutions didnt work out for me....

jQuery Background Image Transition How To?

jquery,image,background,background-image,fade
I'm trying to create a homepage with a changing background. Right now, I have it set so that the body itself holds the background image, and I simply want one image to fade to the next and then cycle through to the beginning. My first issue: it isn't working. Period....

css background for div not working

html,css,background-image
I'm trying to use an image as background for a div element. I've changed the background-position and background-size properties as well. But it's still not working. Below is the code: .large-circle { border-radius: 50%; display: inline-block; width: 150px; height: 150px; position:absolute; top:50%; left:50%; margin-left:-5em; margin-top:-5em; } #center { background: url("img/newHex.png")...

DIVs with background-size

html,css,responsive-design,background-image,background-size
I am having an issue with trying to make a fluid HTML page. (I wanted to take into account different sized resolutions, so I'm working with background images with widths of 1920px) So I wanted to make a couple stacked divs, each with a background that gets resized via background-size....

How to change background image of div with select tag, using javascript?

javascript,html,background-image
How can i change the background image of my div using the select tag so when a certain option is selected the background changes, this is my code: <div class="idcard" id="idcard-div"></div> <div class="select-idcard" id="idcard-select"> <p>Select Background Image</p> <select> <option id="idcard-option1" value="blue">Default/Blue</option> <option id="idcard-option2" value="red">Red</option> <option id="idcard-option3" value="purple">Purple</option> <option...

Mulitple Background Images with the same class

html,css,background-image
I definitely didn't use the correct title so apologies ahead of time. I simply don't know how to word my question so here goes. I'm using several Call to Actions on a landing page as full width clickable divs. I'd like to use a different background image for each but...

Background image not showing on firefox and chrome

css,background-image
I have an issue whereby a background image is not showing up on chrome and firefox; Its a background image for a a div that is full width. Any help is appreciated :) please see my codes below: #judges { width: 960px; margin: 0 auto; padding-top: 80px; } #judges .col1...

How to place a background image in a
block and behave as “responsive”

css,responsive-design,background-image
I have a background-image in a block as seen in the page link below. I am trying to display the image as follows: I want the image to consume more of the page background (irrespective of how much content is in the div block I need the image to extend...

css background-image won't display in XAMPP for Mac OSX [on hold]

html,css,background-image
For some strange reason, everything on my site is working but the background-image for my div.hero will not display. Here's my HTML. <!doctype html> <html> <head> <link rel="stylesheet" type="text/css" href="assets/css/all.css"/> <link rel="icon" type="image/png" href="assets/img/favicon.png"/> </head> <body> <header> <?php include_once('header.php'); ?> </header> <main> <section> <div class="hero"> <h1>My Awesome Site</h1> </div> </section>...