Hello,
I m using a background image on my main-page.
That page has some forms too which opens up when a click is made on it.
My problem is that when i click on it, the page background image gets stretched and it gets a weird look.
can it be solved?
<style>
body{
background-image: url(css/images/219043045.jpg); font-family: Arial;
background-size: cover; }
</style>
Yes, it can be solved, but we will need to see more code to determine how to solve it.
Can you post a link to your web site?
QUESTION:
Why do you post messages and then abandon them? Most recently:
Sep 6, 2014, 04:40
Sep 5, 2014, 10:43
http://www.sitepoint.com/forums/showthread.php?1230568-what-is-the-error-in-these-two-styles
Aug 28, 2014, 14:21
[QUOTE=ronpat;5708296]Yes, it can be solved, but we will need to see more code to determine how to solve it.
Can you post a link to your web site?[/QUOTE]
i haven’t made it online yet…
And i haven’t abandoned those questions intentionally, some requires link to my website which i still haven activated… second complete menu is not appearing here for picture attachment on my system for some days that’s why i haven’t able to attach any pictures. 
[ot]
Yes, unfortunately that issue has been affecting a lot of member recently. Hopefully the forums will move onto the new software in the next 24 hours, which will solve that problem.[/ot]
here is the link yo my problem. i have created a demo here… when you click on click heading, background image gets distorted. The condition get worst when i have a picture too on it
The background image grows and shrinks in proportion to the content within the page. When you reveal the text content, the page becomes very long. {background-position:cover} makes the image expand to fill the full height of the page. When the image expands to something greater than its native size, it does indeed become blurry.
I have put together 3 demo examples for your entertainment.
This first example demonstrates how the image expands to fit the window and content, whichever is larger. I believe this is what you are seeing now that you do not like. Keep in mind, this first example is not expected to be used. It is just a starting point so you can see how {background-size:cover} works here and so you can compare these examples.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>bg:cover window+content</title>
<!--
http://www.buddiescolumn.co.in/demo.php
-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"> </script>
<style>
html,body {
width:100%;
height:100%;
}
body {
padding:0;
margin:0;
}
.outer {
background-image:url(ghui.jpg);
background-size:cover;
min-width:100%;
min-height:100%;
}
h1 {
color:#F39;
font-weight:normal;
font-size:30px;
text-align:center;
padding:1em 0;
margin:0;
}
.dave {
width:60%;
min-height:550px;
border:1px solid yellow;
margin:auto;
}
.heading {
margin: 1px;
color: blue;
cursor: pointer;
text-align: left;
position: relative;
width: 43%;
font-weight: bolder;
font-size: 20px;
background-position: center center;
padding-top: 2px;
padding-right: 7px;
padding-bottom: 2px;
padding-left: 7px;
}
.content {
padding: 5px 10px;
}
</style>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery(".content").hide();
//toggle the componenet with class msg_body
jQuery(".heading").click(function()
{
jQuery(this).next(".content").slideToggle(500);
});
});
</script>
</head>
<body>
<div class="outer">
<h1>Demo Page</h1>
<div class="dave">
<h2 class="heading">Click to read</h2>
<div class="content">
<p>Globalization is the process by which the world is interconnected through technology and powerful infrastructure for the purpose of communicating and managing resources. Globalization seems to talk about several vibrant phenomena which ensure two major components. Firstly, they function across national boundaries and secondly, they result in higher incorporation or interdependence of human societies. It is therefore one aspect of development that affects the world in general, from every point of human view.</p>
<p>There are numerous ways in which globalization has impacted the world today. Some of these include modification of worldwide environment in investment, management, machinery, policy-making, economics, and societal conditions, which shaped breaks aimed at the entrepreneurial initiatives to develop global trades at tremendous speed. These would encourage more trading and employment opportunities for individuals across the globe.</p>
<p>Globalization offers a boundless opportunity for business endeavors to develop their trade all over the world. Ways in which trade can be linked to globalization. The first way may include the exceptional progress of foreign direct investment. This has been enabled by ease of internet accessibility all over the world. Secondly, there could be increased competitive advantage, through specialization and division of labor, as different countries can specialize on what they can produce best. The growth of technology innovation has also been influenced by trade on globalized scale. Additionally, service industries, which includes financial, managerial, legal and information, has also been growing to the advantage of globalization.</p>
<p>On employment, globalization has impacted differently in different parts of the world. For instance, through activities such as off-shoring services, numerous jobs are created in developing countries, while the decrease has been felt on developed countries. The job structures are altered since new jobs linked to different activities are introduced while others tend to disappear. Research and development jobs are increasing, especially in the developed world, while the production industries are carried out abroad, more specifically to developing world. Job earnings are also improved in a way to suit particular individuals. In the developing countries, payment are becoming better by the day, while in the developed world, the gap between qualified skilled workers and under qualified skilled works tend to be widening. Other influences of globalization in employment include increase in migration and improved working conditions.</p>
<p>Globalization is therefore an important development in human development. It is therefore important to embrace it. Through the support of local governments, big organizations, and universal organizations, entrepreneurial initiatives are capable of taking advantage of globalization and economic liberalization, to advance their effectiveness in the universal market, as well as enhanced service to the overall customers. Globalization has therefore had a positive impact on the lives of people around the globe with minimum disadvantages.</p>
</div>
</div>
</div>
</body>
</html>This second example shows a fixed background image that adapts to the size of the browser window. It requires one extra box for the background image. I believe this is what you are seeking.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>bg-image box pos:fixed</title>
<!--
http://www.buddiescolumn.co.in/demo.php
-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"> </script>
<style>
html,body {
padding:0;
margin:0;
}
.bgimage {
position:fixed;
top:0;
right:0;
bottom:0;
left:0;
background-image:url(ghui.jpg);
background-size:cover;
z-index:-1;
}
h1 {
color:#F39;
font-weight:normal;
font-size:30px;
text-align:center;
padding:1em 0;
margin:0;
}
.dave {
width:60%;
min-height:550px; /* why? */
border:1px solid yellow;
margin:0 auto;
}
.heading {
display:inline-block;
color:blue;
cursor:pointer;
text-align:left;
font-weight:bolder;
font-size:20px; /* better to use ems for font size */
padding:2px 7px 5px;
margin:0;
background-color:rgba(255,0,255,.12);
}
.content {
padding: 5px 10px;
}
</style>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery(".content").hide();
//toggle the componenet with class msg_body
jQuery(".heading").click(function()
{
jQuery(this).next(".content").slideToggle(500);
});
});
</script>
</head>
<body>
<div class="bgimage"></div>
<h1>Demo Page</h1>
<div class="dave">
<h2 class="heading">Click to read</h2>
<div class="content">
<p>Globalization is the process by which the world is interconnected through technology and powerful infrastructure for the purpose of communicating and managing resources. Globalization seems to talk about several vibrant phenomena which ensure two major components. Firstly, they function across national boundaries and secondly, they result in higher incorporation or interdependence of human societies. It is therefore one aspect of development that affects the world in general, from every point of human view.</p>
<p>There are numerous ways in which globalization has impacted the world today. Some of these include modification of worldwide environment in investment, management, machinery, policy-making, economics, and societal conditions, which shaped breaks aimed at the entrepreneurial initiatives to develop global trades at tremendous speed. These would encourage more trading and employment opportunities for individuals across the globe.</p>
<p>Globalization offers a boundless opportunity for business endeavors to develop their trade all over the world. Ways in which trade can be linked to globalization. The first way may include the exceptional progress of foreign direct investment. This has been enabled by ease of internet accessibility all over the world. Secondly, there could be increased competitive advantage, through specialization and division of labor, as different countries can specialize on what they can produce best. The growth of technology innovation has also been influenced by trade on globalized scale. Additionally, service industries, which includes financial, managerial, legal and information, has also been growing to the advantage of globalization.</p>
<p>On employment, globalization has impacted differently in different parts of the world. For instance, through activities such as off-shoring services, numerous jobs are created in developing countries, while the decrease has been felt on developed countries. The job structures are altered since new jobs linked to different activities are introduced while others tend to disappear. Research and development jobs are increasing, especially in the developed world, while the production industries are carried out abroad, more specifically to developing world. Job earnings are also improved in a way to suit particular individuals. In the developing countries, payment are becoming better by the day, while in the developed world, the gap between qualified skilled workers and under qualified skilled works tend to be widening. Other influences of globalization in employment include increase in migration and improved working conditions.</p>
<p>Globalization is therefore an important development in human development. It is therefore important to embrace it. Through the support of local governments, big organizations, and universal organizations, entrepreneurial initiatives are capable of taking advantage of globalization and economic liberalization, to advance their effectiveness in the universal market, as well as enhanced service to the overall customers. Globalization has therefore had a positive impact on the lives of people around the globe with minimum disadvantages.</p>
</div>
</div>
</body>
</html>This last example is almost identical to the second example. The behavior is the same but it does not require the extra HTML box for the background image. We use body:before to create the container for the background image so no additional HTML is required. I believe this may be your best choice.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>bg-image box pos:fixed</title>
<!--
http://www.buddiescolumn.co.in/demo.php
-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"> </script>
<style>
html,body {
padding:0;
margin:0;
}
body:before {
content:"";
position:fixed;
top:0;
right:0;
bottom:0;
left:0;
background-image:url(ghui.jpg);
background-size:cover;
z-index:-1;
}
h1 {
color:#F39;
font-weight:normal;
font-size:30px;
text-align:center;
padding:1em 0;
margin:0;
}
.dave {
width:60%;
min-height:550px; /* why? */
border:1px solid yellow;
margin:0 auto;
}
.heading {
display:inline-block;
color:blue;
cursor:pointer;
text-align:left;
font-weight:bolder;
font-size:20px; /* better to use ems for font size */
padding:2px 7px 5px;
margin:0;
background-color:rgba(255,0,255,.12);
}
.content {
padding: 5px 10px;
}
</style>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery(".content").hide();
//toggle the componenet with class msg_body
jQuery(".heading").click(function()
{
jQuery(this).next(".content").slideToggle(500);
});
});
</script>
</head>
<body>
<h1>Demo Page</h1>
<div class="dave">
<h2 class="heading">Click to read</h2>
<div class="content">
<p>Globalization is the process by which the world is interconnected through technology and powerful infrastructure for the purpose of communicating and managing resources. Globalization seems to talk about several vibrant phenomena which ensure two major components. Firstly, they function across national boundaries and secondly, they result in higher incorporation or interdependence of human societies. It is therefore one aspect of development that affects the world in general, from every point of human view.</p>
<p>There are numerous ways in which globalization has impacted the world today. Some of these include modification of worldwide environment in investment, management, machinery, policy-making, economics, and societal conditions, which shaped breaks aimed at the entrepreneurial initiatives to develop global trades at tremendous speed. These would encourage more trading and employment opportunities for individuals across the globe.</p>
<p>Globalization offers a boundless opportunity for business endeavors to develop their trade all over the world. Ways in which trade can be linked to globalization. The first way may include the exceptional progress of foreign direct investment. This has been enabled by ease of internet accessibility all over the world. Secondly, there could be increased competitive advantage, through specialization and division of labor, as different countries can specialize on what they can produce best. The growth of technology innovation has also been influenced by trade on globalized scale. Additionally, service industries, which includes financial, managerial, legal and information, has also been growing to the advantage of globalization.</p>
<p>On employment, globalization has impacted differently in different parts of the world. For instance, through activities such as off-shoring services, numerous jobs are created in developing countries, while the decrease has been felt on developed countries. The job structures are altered since new jobs linked to different activities are introduced while others tend to disappear. Research and development jobs are increasing, especially in the developed world, while the production industries are carried out abroad, more specifically to developing world. Job earnings are also improved in a way to suit particular individuals. In the developing countries, payment are becoming better by the day, while in the developed world, the gap between qualified skilled workers and under qualified skilled works tend to be widening. Other influences of globalization in employment include increase in migration and improved working conditions.</p>
<p>Globalization is therefore an important development in human development. It is therefore important to embrace it. Through the support of local governments, big organizations, and universal organizations, entrepreneurial initiatives are capable of taking advantage of globalization and economic liberalization, to advance their effectiveness in the universal market, as well as enhanced service to the overall customers. Globalization has therefore had a positive impact on the lives of people around the globe with minimum disadvantages.</p>
</div>
</div>
</body>
</html>All of these are “working examples”. Each one can be copied to a file and opened in a browser for testing.
Hope this helps.
You are very welcome, shail_arya. Thank you for the feedback.